कैसे बच्चे घटक

Question

के माता पिता के साथ राज्य पारित करने के लिए कोई तरीका की तरह बच्चे घटक के माता-पिता घटक से राज्य से गुजर रहा है। react.js में यह संभव है या नहीं?

Answer 1

आप लाइटलाइट समाधान का उपयोग कर सकते हैं, यानी माता-पिता से बच्चे को एक समारोह पास करना।

या आप भी परियोजनाओं React-Cursor की तरह है जो आसानी से राज्य एक बच्चे में एक माता पिता के घटक से पारित कर दिया हेरफेर करने के लिए अनुमति देता है का उपयोग कर सकते हैं।

---

मैं अपने घर बना ढांचा (एटम-प्रतिक्रिया, some details here) बना दिया है कि यह भी कर्सर (ओम से प्रेरित) का उपयोग करें, और आप किसी भी तरह आसानी से कर्सर राज्य कामयाब हेरफेर करने के लिए अनुमति देने के साथ बंधन 2 तरह डेटा प्राप्त कर सकते हैं एक माता पिता के घटक द्वारा।

<input type="text" valueLink={this.linkCursor(this.props.inputTextCursor)}/> 

inputTextCursor एक कर्सर एक माता पिता से एक बच्चे घटक को पारित कर दिया है, और इस तरह बच्चे को आसानी से माता पिता के डेटा seemlessly बदल सकते हैं:

यहाँ एक उदाहरण के उपयोग है।

यदि अन्य कर्सर आधारित प्रतिक्रिया रैपर चाल इस तरह की लेकिन linkCursor फ़ंक्शन का उपयोग एक साधारण mixin साथ बहुत आसानी से लागू किया गया है मैं नहीं जानता:

var ReactLink = require("react/lib/ReactLink"); 

var WithCursorLinkingMixin = { 
    linkCursor: function(cursor) { 
     return new ReactLink(
      cursor.getOrElse(""), 
      function setCursorNewValue(value) { 
       cursor.set(value); 
      } 
     ); 
    } 
}; 
exports.WithCursorLinkingMixin = WithCursorLinkingMixin; 

तो आप आसानी से बंदरगाह React-Cursor को यह व्यवहार

Answer 2

There is लेकिन यह है कि में की तरह काम करने का इरादा नहीं है प्रतिक्रिया। 2 तरह बाध्यकारी डेटा में जाना डॉक्स से प्रतिक्रिया, अंश के लिए रास्ता नहीं है।

प्रतिक्रिया में, डेटा एक तरफ बहता है: मालिक से बच्चे तक।

तो यदि आप अपने बच्चे के घटक में अभिभावक स्थिति में हेरफेर करना चाहते हैं तो आप क्या करना चाहते हैं श्रोता को पास कर रहा है।

//parent component's render function 
return (
    <Child listenerFromParent={this.doSomething} /> 
) 

//child component's render function 
return (
    <div onClick={this.props.listenerFromParent}></div> 
)