Question

如上所述，我想将一些状态传递给“左组件”，这是Grand-Grand-Grand父组件。

 var grandChildRight = React.createClass({
      clicksomething : function () {
         this.setState({data:'you clicked me'});
      }
});

var leftComponent : React.createClass({
     render : function () {
         {this.props.data}
     };
 });

HTML 
<div class="left">
 <leftComponent data="?" />
</div>
<div class="right">
<rightComponent>
   <anotherComponent>
        <grandChildRight />
    </anotherComponent>
</rightCompoent>
</div>

我可以在不使用“Flux”或“Redux”的情况下做到这一点。请帮帮我。

非常感谢。

Answer 1

应该有一个父组件，然后GrandChildRight组件将让Parent Component关于任何更改，然后Parent Component将告诉Left Component有关更改

var Parent = React.createClass({
     handleEventChange : function(event){
         this.setState({data:event.data})
     },
     render : function () {
         <LeftComponent data={this.state.data}/>
         <RightComponent onEventChange={this.handleEventChange}/>

     };
});

var LeftComponent = React.createClass({
     render : function () {
         <div>{this.props.data}</div>
     };
});

var RightComponent = React.createClass({
     render : function () {
         <GrandChildRightComponent onChildChange={this.handleChildEvent}/>
     };
     handleChildEvent : function (event) {
         this.props.onEventChange({data: event.data})
     };

});

var GrandChildRightComponent = React.createClass({
      clicksomething : function () {
         this.props.onChildChange({data:'Grand child is clicked'})
      }
});

Answer 2

您可以尝试添加包装HTML的容器，并向grandChildRight添加回调道具，以便在状态更新时调用：

var grandChildRight = React.createClass({
    clicksomething: function () {
        this.props.onUpdate({data:'you clicked me'});
    }
});

var leftComponent = React.createClass({
    render : function () {
        {this.props.data}
    };
});

var container = React.createClass({
    onRightGrandChildUpdate: function( newState ) {
       this.setState(newState);
    },

    render: function() {
        return (<div className="container">
          <div className="left">
             <leftComponent data={this.state.data} />
          </div>
          <div className="right">
            <rightComponent>
              <anotherComponent>
                <grandChildRight onUpdate={this.onRightGrandChildUpdate.bind(this)} />
              </anotherComponent>
            </rightCompoent>
          </div>
        </div>);
    }
});

（将.bind(this)传递给this.onRightGrandChildUpdate组件的onUpdate时请注意grandChildRight。这样做可确保this绑定到容器组件，而不是当前的全球对象。）

然后您的“HTML”变为：

<container />

基本上，这会将您感兴趣的data提升到右孙和左侧组件之上的水平。提供的onUpdate属性允许右孙子更新容器的状态，然后影响传递到左侧组件的data。

React - 将数据传递给Grand parent Component

2 个答案: