Question

我正在做一个反应的应用程序，并且想法是让一个组件让它调用它返回函数的组件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>
            );
        }
    });

反应双向组件通信

1 个答案: