React 双向组件通信答案

【问题标题】：React Bidirectional component communicationReact 双向组件通信
【发布时间】：2016-03-09 11:56:40
【问题描述】：

我正在做一个反应应用程序，想法是有一个组件让我们称之为组件A，返回函数有：

                <div>
                            <div>
                                <ExtraComponent 1/>
                                <ExtraComponent 2/>
                            </div>
                            <div>
                                  <B />
                            </div>
                </div>

组件 B 有一个名为 C 的子组件，它在单击时切换（组件 C 仅在 showProperty 为 true 时才会呈现）

  B = React.createClass({
      getInitialState: function() {
        return {
          showProperty: false
        }
      },

        handlerClick(e) {
        this.setState({
          showProperty: !this.state.showProperty
        });
        },

        render() {
            return (
                <div onClick= { this.handlerClick }>
                    <span>B</span>
            <C showProperty={this.state.showProperty} />
                </div>
            );
        }
    });

我想要做的是，当组件 B 切换他的子组件 (C) 时，我希望他与组件 A（它的父亲）进行沟通，这样它就可以切换两个 ExtraComponents。

TLDR : 我需要一种方法让组件在 react 中同时与其子组件和父组件进行通信。

提前致谢。

你好，约翰。

【问题讨论】：

标签： javascript node.js reactjs components

【解决方案1】：

您可以将父组件的回调传递给子组件以更新父组件的状态。然后您可以将父级的状态传递给其他额外的组件。

 var A = React.createClass({
  getInitialState() {
    toggleState: 'false'
  },

  render() {
    return (
        <div>
        <div>
                <ExtraComponent1 toggleState={this.state.toggleState}/>
                <ExtraComponent2 toggleState={this.state.toggleState}/>
            </div>
            <div>
                <B onToggle={this.onToggle.bind(this)}/>
            </div>
        </div>
    );
  },

  onToggle(toggleState) {
    this.setState({ toggleState: toggleState });
  }
});

var B = React.createClass({
      getInitialState: function() {
        return {
          showProperty: false
        }
      },

        handlerClick(e) {
        this.setState({
          showProperty: !this.state.showProperty
        });

        this.props.onToggle(this.state.showProperty);

        },

        render() {
            return (
                <div onClick= { this.handlerClick }>
                    <span>B</span>
            <C showProperty={this.state.showProperty} />
                </div>
            );
        }
    });

【讨论】：