Javascript 双向组件通信

我正在react中开发一个应用程序，其想法是让一个组件称之为组件a，返回函数有：

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

组件B有一个称为C的子组件，单击该子组件时会进行切换（组件C仅在showProperty为true时才会渲染）

B=React.createClass({
getInitialState:函数（）{
返回{
showProperty:false
}
},
把手咔嗒声（e）{
这是我的国家({
showProperty:！this.state.showProperty
});
},
render（）{
返回(
B
);
}
});

我想做的是当组件B切换他的子组件（C）时，我想让他与组件A（其父组件）进行通信，这样它就可以切换两个外部组件

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

TLDR：我需要一种方法，使react中的组件能够同时与其子级和父级通信

提前谢谢

---

您好，John。

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

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

var A=React.createClass({
getInitialState（）{
toggleState:'假'
},
render（）{
返回(
);
},
onToggle（切换状态）{
this.setState（{toggleState:toggleState}）；
}
});
var B=React.createClass({
getInitialState:函数（）{
返回{
showProperty:false
}
},
把手咔嗒声（e）{
这是我的国家({
showProperty:！this.state.showProperty
});
this.props.onToggle（this.state.showProperty）；
},
render（）{
返回(
B
);
}
});