बच्चे नोड्स

Question

के साथ कस्टम रिएक्ट मूल घटक कैसे बनाएं, मैं TouchableOpacity और Text जैसे अन्य घटकों से बना शुद्ध जावास्क्रिप्ट में एक प्रतिक्रिया मूल घटक बनाना चाहता हूं। मेरे ऐप में मेरे कुछ बटन हैं जो कि दो घटकों से बना है इसलिए मैंने सोचा कि बेहतर कोड पुन: उपयोग के लिए अपने घटकों को कैसे बनाना है, यह जानना अच्छा होगा।

समाप्त घटक और अधिक या कम इस तरह दिखना चाहिए:

<Button> 
    Tap me! 
</Button> 

और यह कोड मैं अब तक घटक के लिए बनाई गई है:

class Button extends Component { 
    render() { 
    <TouchableOpacity style={styles.button}> 
     <Text style={styles.textButton}> 
     </Text> 
    </TouchableOpacity> 
    } 
}; 

हालांकि, मैं पता नहीं कैसे मैं अपने घटक में Tap me! आंतरिक बाल पाठ का उपयोग कर सकता हूं और मुझे वास्तव में यह नहीं मिलता है कि मैं कस्टम प्रोप और TouchableOpacity और Text प्रोप को स्वीकार करने के लिए अपना घटक कैसे बना सकता हूं।

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

Answer 1

आप इस.props.children के माध्यम से आंतरिक पाठ तक पहुंच सकते हैं और आप गुण मैन्युअल रूप से (इस.props के माध्यम से) या ऑपरेटर का उपयोग कर सकते हैं ... ऑपरेटर। इनमें से अधिकतर प्रतिक्रिया.जेएस दस्तावेज में वर्णित है (नोट - मूल दस्तावेज़ों पर प्रतिक्रिया न करें!)। दस्तावेज के सबसे अधिक प्रासंगिक भागों हैं:

• http://facebook.github.io/react/docs/multiple-components.html
• https://facebook.github.io/react/docs/components-and-props.html

यह मूल प्रलेखन कि बजाय का वर्णन से सभी प्रतिक्रिया अवधारणाओं प्रतिक्रिया के सामान्य दृष्टिकोण है, वे केवल वर्णित मूल निवासी भागों प्रतिक्रिया और वास्तविक अवधारणा को प्रतिक्रिया के वेब/मूल संस्करण में वर्णित किया गया है।

Answer 2

आप GitHub से रेपो चेकआउट कर सकते हैं: https://github.com/future-challenger/react-native-tabs

कुछ कोड यहाँ:

<View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}> 
    {React.Children.map(this.props.children.filter(c=>c),(el)=> 
    <TouchableOpacity key={el.props.name + "touch"} 
     testID={el.props.testID} 
     style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]} 
     onPress={()=>!self.props.locked && self.onSelect(el)} 
     onLongPress={()=>self.onSelect(el)} 
     activeOpacity={el.props.pressOpacity}> 
      {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el} 
    </TouchableOpacity> 
)} 

React.Children.map(this.props.children.filter...) बच्चों घटकों से निपटने के लिए महत्वपूर्ण है।