如何从父组件内部重置 React 组件以从初始状态开始

Question

var A = React.createClass({
onTabChange:function(e, id){
    this.setState( {tabIndex:id} );
    //Inside this function I would like to get the state of B component 
    //to start from initial state, (i.e. call initialState() function)
},

render:function(){
    return <div>
        <FormTabs options={['A', 'B', 'C']} onChange={this.onTabChange} value={this.state.tabIndex} /> // This creates 3 simple tabs 
        <B x={5} y={8} z={10} />
    </div>;
}

});

var B = React.createClass({
getInitialState:function(){
    return {
        x: a,
        y: b,
        z: c
    }
},

render:function(){
    this.state.x = this.props.x;
    this.state.y = this.props.y;
    this.state.z = this.props.z;

    return <div>
            //...
        </div>
}

});

所以，我真正想要的是在 onTabChange 函数中删除 B 组件的实例。关于如何删除它的实例的任何帮助，以便当我调用时，它会进入 B.initialState() 函数。

Answer 1

所以你问这个的方式有点令人困惑，但如果我理解正确，你想要做的是在使用 B 的 getInitialState 调用 onTabChange 函数时重新渲染 B。一种方法是将 x、y、z 作为单个对象传递（即 }{x:5,y:8,z:10}。然后在 getInitialState 中，您可以检查是否设置了该道具，如果它是作为初始状态返回该道具，如果不是返回 abc。所以它看起来像：

var A = React.createClass({
onTabChange:function(e, id){
    this.setState( {tabIndex:id} );
    ReactDOM.render(<B />, document.getElementById("bContainer));
},

render:function(){
var values= {x:5,y:8,z:10};
return <div>
    <FormTabs options={['A', 'B', 'C']} onChange={this.onTabChange} value={this.state.tabIndex} /> // This creates 3 simple tabs 
    <div id="bContainer">
        <B values={values} />
    </div>
</div>;
}});

var B = React.createClass({
   getInitialState:function(){
      if (this.props.values !== undefined) {
          return this.props.values
      }
      return {
         x: a,
         y: b,
         z: c
       }
   },   

   render:function(){
      //this.state.x = this.props.x;
      //this.state.y = this.props.y;
      //this.state.z = this.props.z;

      return <div>
          //...
         </div>
      }
   };
});

然后，您可以直接在 B 渲染中使用状态变量。
希望这会有所帮助。