React 双向组件通信

Question

我正在做一个 React 应用程序，我的想法是让一个组件称它为组件 A，return 函数具有：

                <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 : 我需要一种方法让组件在反应中同时与其子和父亲通信。

提前致谢。

你好，约翰。

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

React 双向组件通信

React Bidirectional component communication

javascript

components

node.js

reactjs