reactjs - 更改不同组件的状态 - ReactJS

Question

我正在尝试使用 React 构建一个简单的应用程序，它有两个组件，一个嵌入另一个组件。子组件是一个收缩的菜单，单击它时，它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。

这是父组件的样子:

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;

这就是子组件的样子:

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;

我不确定在 React 中执行此操作的正确方法，并且希望得到一些输入。

Answer 1

实现目标的一种方法是将 ChildComponent 展开状态保持在父组件状态中。通过 props 将 isExpand bool 值传递给子组件。同时，还向 ChildComponent 传递回调以更新父组件的 isExpand 状态。

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

});