प्रतिक्रिया करें कि किसी अन्य घटक की स्थिति को कैसे अपडेट करें?

Question

मैं प्रतिक्रिया करने के लिए काफी नया हूं, कुछ घटकों को काम करने की कोशिश कर रहा हूं। मेरे पास

ObjectA:React.createClass({ 
     propTypes: { 
      ... 

     }, 

     getInitialState: function() { 
      return { 
       myState: null 
      } 
     }, 

     updateMyState: function(value) { 
      this.setState({ 
       myState: value 
      }) 
     } 

     render: function() { 
      return (<div className="my-class">'hello' +{this.state.myState}</div>); 
      } 
    }); 

    ObjectB:React.createClass({ 
      propTypes: { 
       ... 

      }, 

      render: function() { 
       return (<div className="my-class"><ObjectA/> 

      </div>); 
      } 
     }); 

मैं ऑब्जेक्ट बी से ऑब्जेक्टए का राज्य अपडेट करना चाहता हूं। ऑब्जेक्टब में मैं ऑब्जेक्टए के अपडेट माइस्टेट विधि को कैसे कॉल कर सकता हूं? धन्यवाद!

Answer 1

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

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

ObjectA:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    render: function() { 
     return (<div className="my-class">'hello' +{ this.props.name }</div>); 
     } 
}); 

ObjectB:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    getInitialState: function() { 
     return { 
      name: null 
     } 
    }, 

    onNameChange: function(newName) { 
     this.setState({ name: newName }) 
    }, 

    render: function() { 
     return (
      <div className="my-class"> 
       <ObjectA name={ this.state.name } /> 
      </div> 
     ); 
    } 
});