एक अलग घटक की स्थिति बदलना - ReactJS

Question

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

import React from 'react'; 

var div = React.createFactory('div'); 

var MenuBar = React.createClass({ 
    getInitialState: function() { 
     return ({menuIsShowing: false}); 
    } 
    showMenu: function() { 
     return this.setState({menuIsShowing: true}); 
    }, 
    render: function() { 
     var isShowing = this.state.menuIsShowing ? 'menuSlideDown' : ''; 
     return div({ className: 'menu-bar ' + isShowing, onClick: this.showMenu }); 
    } 
}); 

export default MenuBar; 

मैं में ऐसा करने का सही तरीका को लेकर अनिश्चित हूं प्रतिक्रिया और होगा:

import React from 'react'; 
import MenuBar from './_components/MenuBar.js'; 

var div = React.createFactory('div'); 
var menu = React.createFactory(MenuBar); 

var HomeComponent = React.createClass({ 
    render: function() { 
     return div({ className: 'page home current', onClick: changeChildState //change the state of the child component to false }, 
      menu() 
     ) 
    } 
}); 



export default HomeComponent; 

यह बच्चा घटक दिखता है की तरह है:

यह वही है माता पिता घटक लगता है कि है कुछ इनपुट प्यार करो।

Answer 1

आपको लक्ष्य प्राप्त करने का एक तरीका है मूल घटक स्थिति में ChildComponent विस्तृत स्थिति को पकड़ना। Props द्वारा बच्चे घटक के लिए isExpand बूलियन पास करें। साथ ही, अभिभावक को अद्यतन करने के लिए ChildComponent को कॉलबैक भी पास करें Ixpand स्थिति है।

var HomeComponent = React.createClass({ 
    getInitialState: function() { 
    return ({menuIsShowing: false}); 
    }, 

    changeChildOpenStatus: function() { 
    this.setState({menuIsShowing: true}); 
    }, 

    render: function() { 
    return div({ className: 'page home current', onClick: this.changeChildOpenStatus }, 
     menu({ menuIsShowing: this.state.menuIsShowing, handleChildClicked: this.changeChildOpenStatus }) 
    ) 
    } 
}); 

तो बच्चे घटक

var MenuBar = React.createClass({ 
    handleExpandClicked: function(event) { 
    this.props.handleChildClicked(event); 
    }, 

    render: function() { 
    var isShowing = this.props.menuIsShowing; 
    return div({ className: 'menu-bar ' + isShowing, onClick: this.handleExpandClicked }); 
    } 

});