एक बच्चे घटक में एक फ़ंक्शन को कॉल करने पर प्रतिक्रिया

Question

मैं एक बच्चे घटक में संग्रहीत फ़ंक्शन को कॉल करने का प्रयास कर रहा हूं। लेकिन यह सुनिश्चित करने के लिए सुनिश्चित नहीं है। मुझे पता है कि माता-पिता के रूप में बच्चे बनने के लिए मैं बस घटक प्रोप का उपयोग कर सकता था लेकिन यह सुनिश्चित नहीं करता कि माता-पिता से बच्चे को कैसे किया जाए।

जैसा कि आप नीचे दिए गए उदाहरण को देख सकते हैं, मूल वर्ग में बटन को बाल वर्ग में प्रदर्शन फ़ंक्शन को ट्रिगर करने की आवश्यकता है।

var Parent = React.createClass ({ 
    render() { 
     <Button onClick={child.display} ?> 
    } 
}) 


var Child = React.createClass ({ 
    getInitialState() { 
     return { 
      display: true 
     }; 
    }, 


    display: function(){ 
     this.setState({ 
      display: !this.state.display 
     }) 
    }, 

    render() { 
    {this.state.display} 
    } 
}) 

Answer 1

इस लक्ष्य को हासिल करने के लिए सबसे आसान तरीका है refs का उपयोग कर के माध्यम से है।

var Parent = React.createClass ({ 

    triggerChildDisplay: function() { 
     this.refs.child.display(); 
    }, 

    render() { 
     <Button onClick={this.triggerChildDisplay} /> 
    } 
}) 


var Child = React.createClass ({ 
    getInitialState() { 
     return { 
      display: true 
     }; 
    }, 


    display: function(){ 
     this.setState({ 
      display: !this.state.display 
     }) 
    }, 

    render() { 
    {this.state.display} 
    } 
}) 

मैं मूल रूप से अपने उदाहरण में नकल, लेकिन ध्यान दें कि आपके माता पिता में, मैं तुम्हें एक बच्चे घटक प्रस्तुत करना नहीं दिख रहा है, लेकिन आम तौर पर, आप, और कहा कि बच्चे पर आप इसे एक रेफरी देना होगा होगा, <Child ref="child" /> की तरह।

Answer 2

मैं नहीं मानता कि यह एक माता पिता के घटक से एक बच्चे समारोह कॉल करने के लिए संभव है।

इस उपयोग के लिए इस परिणाम को प्राप्त करने का एक बेहतर तरीका है और यह कि बच्चे के घटक की 'डिस्प्ले' संपत्ति को माता-पिता द्वारा पारित प्रोप के मूल्य पर सेट करके, उदाहरण के लिए है।

var Parent = React.createClass ({ 
    getInitialState() { 
     return {displayChild: false}; 
    }, 

    toggleChildDisplay() { 
     this.setState({ 
      displayChild: !this.state.displayChild 
     }); 
    }, 

    render() { 
     <Button onClick={this.toggleChildDisplay} /> 
     <Child display={this.state.displayChild} /> 
    } 
}); 

var Child = React.createClass ({ 
    render: function() { 
     if (this.props.display) { 
      /*return component*/ 
     } else { 
      /*Don't render*/ 
     } 
    } 
});