React
घटकों के बीच संचार

टिप्पणियों

बाल घटकों के लिए जनक

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

आप बच्चे के घटकों के लिए सहारा पास कर सकते हैं । इस उदाहरण message में वह प्रोप है जिसे हम चाइल्ड कंपोनेंट में पास करते हैं, नाम संदेश को मनमाने ढंग से चुना जाता है, आप इसे अपनी इच्छानुसार नाम दे सकते हैं।

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

यहां, <Parent /> घटक दो <Child /> घटकों को प्रस्तुत करता है, पहले घटक के अंदर message for child और दूसरे के अंदर 5 ।

सारांश में, आपके पास एक घटक (माता-पिता) है जो एक दूसरे (बच्चे) को प्रस्तुत करता है और इसे कुछ सहारा देता है।

बाल माता-पिता के घटक

माता-पिता को वापस डेटा भेजना, ऐसा करने के लिए हम बस एक फ़ंक्शन को पैरेंट घटक से चाइल्ड कंपोनेंट के प्रोप के रूप में पास करते हैं , और चाइल्ड कंपोनेंट उस फ़ंक्शन को कॉल करता है ।

इस उदाहरण में, हम पैरेंट स्टेट को चाइल्ड कंपोनेंट में एक फंक्शन पास करके और उस फंक्शन को चाइल्ड कंपोनेंट के अंदर डालकर बदल देंगे।

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

ध्यान दें कि पेरेंट की outputEvent विधि (जो कि पेरेंट स्टेट को बदल देती है) को चाइल्ड के बटन onClick इवेंट द्वारा outputEvent किया गया है।

संबंधित घटक नहीं

एक ही तरीका है अगर आपके घटकों में माता-पिता-बच्चे का संबंध नहीं है (या संबंधित हैं लेकिन आगे भी ऐसे ही एक भव्य भव्य पुत्र के रूप में) किसी तरह का संकेत है जो एक घटक की सदस्यता लेता है, और दूसरा लिखता है।

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

ऐसा करने के लिए कम से कम 3 पैटर्न हैं। आप यहां एक तुलना पा सकते हैं।

यहाँ एक संक्षिप्त सारांश है:

• पैटर्न 1: इवेंट एमिटर / टार्गेट / डिस्पैचर : श्रोताओं को सदस्यता लेने के लिए स्रोत का संदर्भ देना होगा।

  • to subscribe: otherObject.addEventListener('click', () => { alert('click!'); });
  • प्रेषण करने के लिए: this.dispatchEvent('click');

• पैटर्न 2: प्रकाशित करें / सदस्यता लें : आपको उस स्रोत के लिए एक विशिष्ट संदर्भ की आवश्यकता नहीं है जो घटना को ट्रिगर करता है, हर जगह सुलभ एक वैश्विक ऑब्जेक्ट है जो सभी घटनाओं को संभालता है।

  • सदस्यता लेने के लिए: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • प्रेषण करने के लिए: globalBroadcaster.publish('click');

• पैटर्न 3: सिग्नल : इवेंट एमिटर / टार्गेट / डिस्पैचर के समान लेकिन आप यहां किसी भी यादृच्छिक स्ट्रिंग्स का उपयोग नहीं करते हैं। प्रत्येक वस्तु जो घटनाओं का उत्सर्जन कर सकती है, उस नाम के साथ एक विशिष्ट संपत्ति होनी चाहिए। इस तरह, आप ठीक से जानते हैं कि कौन सी घटनाएं किसी वस्तु का उत्सर्जन कर सकती हैं।

  • सदस्यता लेने के लिए: otherObject.clicked.add( () => { alert('click'); });
  • प्रेषण करने के लिए: this.clicked.dispatch();