प्रतिक्रिया-मूल में तत्वों को लूप और प्रस्तुत करने के लिए कैसे?

Question

क्या रेंडर फ़ंक्शन में एक समान घटक लूप करना संभव है?

कुछ इस तरह:

... 

onPress =() => { 
... 
}; 

initialArr = [["blue","text1"],["red","text2"]]; 
buttonsListArr = []; 

for (let i = 0; i < initialArr.length; i++) 
{ 
buttonsListArr.push(
    <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button> 
); 
} 

... 

render() { 
    return (
    <View style={...}> 
    {buttonsListArr} 
    </View> 
)}; 

मेरा मतलब यह घटकों के सिर्फ परिमित सूची है, इसलिए ListView/scrollview आदि की तरह किसी भी घटक इस विशेष मामले में लागू नहीं है। यह सिर्फ वाक्यविन्यास सवाल है।

Answer 1

आप आमतौर पर उस तरह की चीज़ के लिए मानचित्र का उपयोग करेंगे।

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button> 
); 

एक पक्ष के रूप में (कुंजी एक आवश्यक प्रोप जब भी आप मानचित्रण प्रतिक्रिया। कुंजी की जरूरत उत्पन्न घटक के लिए एक अद्वितीय पहचानकर्ता होने के लिए है), मैं करने के बजाय एक वस्तु का प्रयोग करेंगे एक सरणी। मैं यह लग रहा है लगता है अच्छे:

initialArr = [ 
    { 
    id: 1, 
    color: "blue", 
    text: "text1" 
    }, 
    { 
    id: 2, 
    color: "red", 
    text: "text2" 
    }, 
]; 

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button> 
); 

Answer 2

render() { 
    return (
    <View style={...}> 
     {initialArr.map((prop, key) => { 
     return (
      <Button style={{borderColor: prop[0]}} key={key}>{prop[1]}</Button> 
     ); 
     })} 
    </View> 
) 
} 

चाल

Answer 3

प्रारंभिक सरणी के लिए, सरणी के बजाय बेहतर इस्तेमाल वस्तु है, तो के रूप में आप अनुक्रमित के बारे में चिंता नहीं की जाएगी क्या करना चाहिए और यह हो जाएगा और अधिक स्पष्ट क्या है क्या:

const initialArr = [{ 
    color: "blue", 
    text: "text1" 
}, { 
    color: "red", 
    text: "text2" 
}]; 

वास्तविक मानचित्रण के लिए, जे एस सरणी मानचित्र का उपयोग पाश के लिए के बजाय - पाश मामलों में इस्तेमाल किया जाना चाहिए के लिए जब कोई वास्तविक सरणी परिभाषित, कुछ एक निश्चित संख्या प्रदर्शित की तरह समय के बियर:

onPress =() => { 
    ... 
}; 

renderButtons() { 
    return initialArr.map((item) => { 
     return (
      <Button 
       style={{ borderColor: item.color }} 
       onPress={this.onPress} 
      > 
       {item.text} 
      </Button> 
     ); 
    }); 
} 

... 

render() { 
    return (
     <View style={...}> 
      { 
       this.renderButtons() 
      } 
     </View> 
    ) 
} 

मैंने मैपिंग को अधिक पठनीय कोड के लिए रेंडर विधि के बाहर अलग फ़ंक्शन में स्थानांतरित कर दिया। प्रतिक्रियाशील मूल में तत्वों की सूची के माध्यम से लूप करने के कई अन्य तरीके हैं, और आप जिस तरह से उपयोग करेंगे, इस पर निर्भर करता है कि आपको क्या करने की आवश्यकता है। इनमें से अधिकतर तरीकों को this article about React JSX loops में शामिल किया गया है, और हालांकि यह प्रतिक्रिया उदाहरणों का उपयोग कर रहा है, इसके अलावा सब कुछ प्रतिक्रिया मूल में उपयोग किया जा सकता है। यदि आप इस विषय में रूचि रखते हैं तो कृपया इसे देखें!

इसके अलावा, लूपिंग पर विषय पर नहीं, लेकिन जैसा कि आप पहले से ही ऑनप्रेस फ़ंक्शन को परिभाषित करने के लिए सरणी वाक्यविन्यास का उपयोग कर रहे हैं, फिर भी इसे बाध्य करने की आवश्यकता नहीं है। यह फिर से लागू होता है अगर फ़ंक्शन को घटक के भीतर इस वाक्यविन्यास का उपयोग करके परिभाषित किया जाता है, क्योंकि तीर सिंटैक्स ऑटो फ़ंक्शन को बांधता है।