किसी घटक के राज्य को किसी अन्य घटक से कैसे एक्सेस करें

Question

मैं किसी अन्य घटक में एक घटक के राज्य को कैसे एक्सेस करूं? नीचे मेरा कोड है और मैं घटक a घटक b में घटक की स्थिति तक पहुंचने का प्रयास कर रहा हूं।

var a = React.createClass({ 
    getInitialState: function() { 
     return { 
      first: "1" 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

var b = React.createClass({ 
    getInitialState: function() { 
     return { 
      second: a.state.first 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

लेकिन मुझे कुछ भी नहीं मिल रहा है।

Answer 1

यदि दो घटकों को एक ही राज्य तक पहुंच की आवश्यकता है तो उनके पास एक सामान्य पूर्वज होना चाहिए जहां राज्य रखा जाता है।

तो घटक एक बी और सी की मूल घटक एक राज्य है, और यह नीचे से गुजरता है बी और सी को रंगमंच की सामग्री के रूप में आप से बी आप एक कॉलबैक समारोह के रूप में नीचे पारित राज्य बदलना चाहते हैं एक सहारा।

Answer 2

भले ही आप इस तरह से करने का प्रयास करें, state तक पहुंचने के लिए यह सही तरीका नहीं है। एक मूल घटक होना बेहतर है जिसके बच्चे a और b हैं। ParentComponentstate बनाए रखेगा और इसे बच्चों के प्रोप के रूप में पास करेगा।

उदाहरण के लिए

,

var ParentComponent = React.createClass({ 
    getInitialState : function() { 
    return { 
     first: 1, 
    } 
    } 

    changeFirst: function(newValue) { 
    this.setState({ 
     first: newValue, 
    }); 
    } 

    render: function() { 
    return (
    <a first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    <b first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    ) 
} 
} 

अब अपने बच्चे में a और b, पहुँच first चर compoenents this.props.first का उपयोग कर। जब आप firstthis.props.changeFirst()ParentComponent के फ़ंक्शन का मान बदलना चाहते हैं। इससे मूल्य बदल जाएगा और इस प्रकार a और b दोनों बच्चों में दिखाई देगा।

मैं यहाँ घटक a लिख रहा हूँ, b समान हो जाएगा:

var a = React.createClass({ 

    render: function() { 
    var first = this.props.first; // access first anywhere using this.props.first in child 
    // render JSX 
    } 
} 

Answer 3

मैं आप अपने राज्य का प्रबंधन करने के Redux (व्यक्तिगत पसंदीदा), MobX भाटा, आदि जैसे एक राज्य प्रबंधक का उपयोग सुझाव है।

ये कैसे काम करते हैं कि वे आपको एक राज्य भंडारण (स्टोर कहा जाता है) में सभी साझा स्थिति को शामिल करने की अनुमति देते हैं, और जो भी घटक उस साझा राज्य के किसी हिस्से तक पहुंच की आवश्यकता है, वह इसे स्टोर से ही प्राप्त कर लेगा।

यह शुरू करने के लिए बहुत मुश्किल लग रहा था लेकिन एक बार जब आप छोटी चुनौतियों का सामना कर लेते हैं, तो रास्ते में 2 या 3 "wtf" प्राप्त करें। यह आसान हो जाता है।

यहाँ एक नज़र डालें: http://redux.js.org/

संपादित करें: Redux अच्छा है, लेकिन बॉयलरप्लेट कोड वास्तव में आप में से उन की तलाश के लिए एक मोड़ बंद है ... एक सरल, अधिक जादुई (यह अच्छा हो सकता है और खराब) समाधान का उपयोग mobx: https://mobx.js.org/