वस्तुओं के ऐरे से प्रतिक्रियाशील अवयवों का प्रतिपादन

Question

मेरे पास कुछ आंकड़े हैं जिन्हें स्टेशन कहा जाता है जो एक सरणी है जिसमें ऑब्जेक्ट हैं।

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

मैं प्रत्येक सरणी स्थिति के लिए एक ui घटक प्रस्तुत करना चाहते हैं। अब तक मैं लिख सकता हूं

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

और फिर रेंडर करें

render(){
 return (
   {stationsArr}
 )
}

समस्या यह है कि मैं सभी डेटा का प्रिंट आउट ले रहा हूं। मैं इसके बजाय सिर्फ एक कुंजी दिखाना चाहता हूं, {this.data.call}लेकिन कुछ भी नहीं छापता है।

मैं इस डेटा के माध्यम से कैसे लूप कर सकता हूं और सरणी की प्रत्येक स्थिति के लिए एक नया UI तत्व वापस कर सकता हूं?

Comments

मैं गलत हो सकता हूं, लेकिन मुझे लगता है कि आपको फ़ंक्शन stationsArrके stationsअंदर उपयोग करने की आवश्यकता है render।

— ताहिर अहमद

Answer 1

आप स्टेशनों की सूची ReactElements के लिए मैप कर सकते हैं।

React> = 16 के साथ, एक अतिरिक्त html तत्व आवरण की आवश्यकता के बिना एक ही घटक से कई तत्वों को वापस करना संभव है। 16.2 के बाद से, टुकड़े बनाने के लिए एक नया वाक्यविन्यास <> है। यदि यह आपके आईडीई द्वारा काम नहीं करता है या समर्थित नहीं है, तो आप <React.Fragment>इसके बजाय उपयोग कर सकते हैं । 16.0 और 16.2 के बीच, आप टुकड़ों के लिए एक बहुत ही सरल पॉलीफ़िल का उपयोग कर सकते हैं ।

निम्नलिखित का प्रयास करें

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});

var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

keyविशेषता मत भूलना !

https://jsfiddle.net/69z2wepo/14377/

Comments

@thatgibbyguy: अरे हाँ! यह सही जवाब हो सकता है। अपने बच्चे के घटकों के चारों ओर एक आवरण होने की आवश्यकता है। आपके renderफ़ंक्शन को एक एकल तत्व वापस करना होगा।

— ताहिर अहमद

प्रत्येक स्टेशन तत्व के लिए एक प्रमुख विशेषता सुझाने का क्या कारण होगा? मैं जो पूछ रहा हूं वह यह है कि अगर अभी इसकी जरूरत नहीं है तो क्या बदल जाएगा?

— thatgibbyguy

इस मामले में @thatgibbyguy यह बहुत फायदा नहीं लाता है। अधिक उन्नत उदाहरणों में, यह बेहतर प्रतिपादन प्रदर्शन करने की अनुमति देता है क्योंकि रिएक्ट आसानी से जान सकता है कि क्या मौजूदा नोड को स्टेशन सरणी में किसी अन्य स्थान पर ले जाया गया है, इस प्रकार एक मौजूदा डोम नोड को नष्ट करने और फिर से बनाने से बचें (और डोम नोड को माउंट भी रखें) । यह प्रतिक्रिया में है डॉक्टर: facebook.github.io/react/docs/reconciliation.html#keys

— सेबस्टियन लॉबर

विषय से थोड़ा हटकर लेकिन मुझे यकीन नहीं है कि यह पूछने के लिए एक क्वेरी कैसे बनाई जाए। ऊपर अपने उदाहरण में ES6 सिंटैक्स का उपयोग करते समय, कोई मानचित्र से सूचकांक में पास होने के बारे में कैसे जानेगा? IOW, मैं सरणी के अंतिम नोड में कैसे पता लगा सकता हूं? मैं parens में लपेटने की कोशिश की और यह अच्छी तरह से जाना नहीं लगता था।

— लेन गोल्सबी

@ElHombre stations.map((station,index) => { })मेरे लिए ठीक काम करता है

— सेबेस्टियन

Answer 2

मेरे पास एक जवाब है जो खुद की तरह newbies के लिए थोड़ा कम भ्रमित हो सकता है। आप बस mapघटक रेंडर विधि के भीतर उपयोग कर सकते हैं ।

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}

Comments

यह एक जरूरत है keyप्रोप reactjs.org/docs/lists-and-keys.html#keys

— डेविड Barratt

कभी-कभी यह बहुत अधिक सहायक होता है।

— :)

Answer 3

this.data संभवतः सभी डेटा समाहित हैं, इसलिए आपको ऐसा कुछ करने की आवश्यकता होगी:

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

या mapयदि आप ES6 का उपयोग कर रहे हैं, तो आप फ़ंक्शन का उपयोग और तीर कर सकते हैं :

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);

Comments

यह वर्तमान प्रतिक्रिया संस्करण में काम नहीं करेगा, आप एक सरणी नहीं लौटा सकते।

— आफताब नवीद

@AftabNaveed धन्यवाद मैंने इसे अपडेट किया है, रेंडर को एक तत्व वापस करना चाहिए, लेकिन उसके अंदर तत्वों की एक सरणी होना मान्य है

— डोमिनिक

जैसा कि @AftabNaveed कहता है, यदि प्रतिक्रिया संस्करण <16 है, तो आपको ऊपर उपयोग करने की आवश्यकता होगी, अन्यथा आप बस return stations;( codepen.io/pawelgrzybek/pen/WZEKWj )

— चिकन सूप

Answer 4

वहाँ कुछ तरीके हैं जो इस्तेमाल किया जा सकता है।

const stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
];
const callList = stations.map(({call}) => call)

समाधान 1

<p>{callList.join(', ')}</p>

समाधान २

<ol>    
  { callList && callList.map(item => <li>{item}</li>) }
</ol>

बेशक वहाँ अन्य तरीके भी उपलब्ध हैं।