Farklı bir bileşenin değiştirme durumu - ReactJS

Question

Biri diğerine gömülü iki bileşene sahip bir tepki kullanarak basit bir uygulama oluşturmaya çalışıyorum. Alt bileşen sözleşmeli menüdür ve tıklandığında genişler. Ana öğe tıklandığında veya çocuk öğesi odağı kaybettiğinde yeniden sözleşme yapabilmek istiyorum. Ben de bunu yapmanın doğru yolu emin değilim tepki ve olur

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; 

Bu gibi çocuk bileşen görünür:

Bu

ana bileşeni neye benzediği bazı girdileri seviyorum.

Answer 1

Hedefinize ulaşmanın bir yolu, ChildComponent durumunun ana bileşen durumundaki durumunu genişletmektir. IsExpand boolean'i, alt öğe ile sahne bileşenine geçirin. Aynı zamanda, üst isExpand durumunu güncellemek için ChildComponent öğesine bir geri bildirimi de iletir.

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 }) 
    ) 
    } 
}); 

Sonra olsun bu kod uygulamak denemeden sonra çocuk unsuru

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 }); 
    } 

});