मैप करने के लिए ऑब्जेक्ट की एक सरणी के बिना React.js में तत्वों को कैसे लूप और रेंडर करें?

Question

मैं एक jQuery घटक को React.js में बदलने की कोशिश कर रहा हूं और उन चीजों में से एक, जिनके साथ मुझे कठिनाई हो रही है एक एन फॉर लूप के आधार पर तत्वों की संख्या प्रदान कर रहा है।

मैं समझता हूं कि यह संभव नहीं है, या सिफारिश की गई है और जहां मॉडल में एक सरणी मौजूद है वह उपयोग करने के लिए पूर्ण समझ में आता है map। यह ठीक है, लेकिन जब आपके पास सरणी नहीं है तो क्या होगा? इसके बजाय आपके पास संख्यात्मक मूल्य है जो दिए गए तत्वों की एक संख्या के बराबर है, तो आपको क्या करना चाहिए?

यहाँ मेरा उदाहरण है, मैं एक पदानुक्रम स्तर के आधार पर एक तत्व को मनमाना संख्या में टैग के साथ उपसर्ग करना चाहता हूं। तो स्तर 3 पर, मुझे पाठ तत्व से पहले 3 स्पैन टैग चाहिए।

जावास्क्रिप्ट में:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

मुझे यह, या JSX React.js घटक में काम करने के समान कुछ भी प्रतीत नहीं हो सकता है। इसके बजाय मुझे निम्नलिखित कार्य करना था, पहले एक अस्थायी सरणी को सही लंबाई में बनाना और फिर सरणी को लूप करना।

React.js

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

निश्चित रूप से यह सबसे अच्छा, या इसे प्राप्त करने का एकमात्र तरीका नहीं हो सकता है? मैं क्या खो रहा हूँ?

Comments

facebook.github.io/react/docs/...

— caub

आप भी बस इतना ही कर सकते हैं: jsfiddle.net/crl/69z2wepo/19804

— ca

Answer 1

अपडेट किया गया: रिएक्ट के रूप में> 0.16

रेंडर विधि के लिए जरूरी नहीं कि वह किसी एक तत्व को लौटाए। एक सरणी भी लौटाई जा सकती है।

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

या

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

डॉक्स यहाँ JSX बच्चों के बारे में समझाते हुए

---

पुराना:

आप इसके बजाय एक लूप का उपयोग कर सकते हैं

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

तुम भी उपयोग कर सकते हैं .map और फैंसी ES6

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

इसके अलावा, आपको एक कंटेनर में रिटर्न वैल्यू को लपेटना होगा। मैंने उपरोक्त उदाहरण में div का उपयोग किया है

जैसा कि डॉक्स यहां कहते हैं

वर्तमान में, एक घटक के रेंडर में, आप केवल एक नोड वापस कर सकते हैं; यदि आपके पास लौटने के लिए divs की सूची है, तो आपको अपने कंपोनेंट्स को div, स्पैन या किसी अन्य कंपोनेंट में लपेटना होगा।

Comments

यह काम करता है, और यह बहुत सरल धन्यवाद है। हां, मुझे पता है कि आपको कंटेनर में रिटर्न वैल्यू को लपेटना होगा, मैं कर रहा हूं कि पहले से ही यह केवल उदाहरण से गायब है।

— जोनाथन माइल्स ने

लूप के अंदर चाबियाँ जोड़ें। प्रतिक्रिया में चाबियाँ महत्वपूर्ण हैं।

— आमिर अफरीदी

मैं आप सभी को जीवन भर देख रहा हूँ

— olleh

@ElgsQianChen यह संभव नहीं है। इसे किसी टैग के साथ लपेटना होगा। यदि {indents} एकल डोम तत्वों को उसके अंदर की सामग्री के साथ लौटाता है, तो उसका ठीक

— धीरज

मुझे समझ नहीं आ रहा है कि इस उत्तर में मानचित्र विधि का उल्लेख क्यों किया गया है, क्योंकि यह केवल एरे वस्तुओं के लिए काम करता है, जो कि स्पष्ट रूप से कहता है कि यह मामला नहीं है।

— flukyspore 14

Answer 2

यहाँ कुछ ES6 सुविधाओं के साथ अधिक कार्यात्मक उदाहरण है:

'use strict';

const React = require('react');

function renderArticles(articles) {
    if (articles.length > 0) {      
        return articles.map((article, index) => (
            <Article key={index} article={article} />
        ));
    }
    else return [];
}

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

const Articles = React.createClass({
    render() {
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                { articles }
            </section>
        );
    }
});

module.exports = Articles;

Comments

यह ऐसा करने का सबसे 'रिएक्टी' तरीका लगता है। मानों को किसी अन्य उप घटक के रूप में पास करें। धन्यवाद!

— माइकल जियोवानी पुमो

यह है एक बेहतरीन! जब आपके रेंडर () html भारी हो तो सही।

— मैथ्यू

इसे और अधिक ES6 बनाने के लिए आप उपयोग कर सकते हैं import React from "react"औरexport default Articles

— jonlink

यह उत्तर प्रश्न का उत्तर देने का प्रयास भी नहीं करता है। यह प्रश्न स्पष्ट था, कि for loopएक रिएक्ट घटक में आइटमों की एक सरणी न होने पर एन संख्या को रेंडर करने के लिए एक मैप'एबल सरणी (या ऑब्जेक्ट) में कैसे परिवर्तित किया जाए। आप समाधान पूरी तरह से उस तथ्य को नजरअंदाज करते हैं और मानते हैं कि सहारा से लेखों की एक सरणी पारित की जा रही है।

— जोनाथन मील

Answer 3

मैं Object.keys(chars).map(...)रेंडर में लूप का उपयोग कर रहा हूं

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

Comments

आपके उत्तर ने मेरे लिए काम किया, लेकिन केवल मेरे जुड़ने के बाद chars && ...और .bind(this)अपने कार्य के अंत में। मैं उत्सुक हूं कि केवल Object...(इतने पर और आगे क्यों ) काम नहीं किया। मैं अपरिभाषित होता रहा।

— 2100 पर m00saca

यह सवाल का जवाब नहीं देता है, यह विशेष रूप से पार्स करने के लिए वस्तुओं की एक सरणी के बिना कहता है और स्पष्टीकरण स्पष्ट रूप से कहता है कि मैं रिएक्ट घटक में प्रतिपादन के लिए लूप को मैप में बदलना चाहता हूं। आपने किसी ऑब्जेक्ट के लिए सरणी को प्रतिस्थापित किया है जो प्रश्न का उत्तर देने में मदद नहीं करता है, या कोई और मूल्य नहीं जोड़ता है।

— जोनाथन माइल्स

Answer 4

Array.from()एक सरणी और एक वैकल्पिक मानचित्र फ़ंक्शन में कनवर्ट करने के लिए एक चलने योग्य वस्तु लेता है। आप .lengthनिम्न प्रकार से एक संपत्ति बना सकते हैं :

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);

Comments

मैं पिछले सप्ताह इस प्रश्न को सुनने के बाद आपके प्रश्न को देखने के लिए हुआ था, इसलिए मैंने जो सीखा है उसे लागू करने का सबसे तेज़ तरीका था! वाक्य

— रचना।

बस मुझे तत्वों की एक्स संख्या प्रदान करने के लिए क्या चाहिए, धन्यवाद!

— लिरन एच

Answer 5

मुझे लगता है कि अभिक्रिया js में लूप करने का यह सबसे आसान तरीका है

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>

Comments

यह प्रश्न का उत्तर नहीं देता है, कृपया उत्तर देने का प्रयास करने से पहले प्रश्न को पूर्ण रूप से पढ़ें।

— जोनाथन मील

इससे मुझे मदद मिली और मैंने अपना समय बचाया।

— अजय मल्होत्रा