双向组件通信

Question

我正在使用function中的一个应用程序，想法是有一个组件，让它称为组件A，返回函数有：

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

组件B有一个名为C的子组件，它在单击时会切换(组件C只有在showProperty为真时才会呈现)

  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 :我需要一种让组件同时与孩子和父亲沟通的方法。

提前谢谢。

你好，约翰。

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