直接修改来自孩子的父道具的反应

Question

在步骤1的向导中​​，我可以直接修改父道具，因此在安装步骤2之后，它将具有该道具修改道具吗？或者我应该怎么做？

向导组件，渲染

<Wizard>
  {this.state.step1 &&
    <Step1 dataWizard={this.state.dataWizard} />
  }
  {this.state.step2 &&
    <Step2 dataWizard={this.state.dataWizard} />
  }
</Wizard>

Step1组件

class Step1 extends React.Component {

  ...

  updateData() {
    this.props.dataWizard.idCreation = 432876;
  }

Answer 1

您应该使用州，因为

  

<强> Props are Read-Only

您应该在组件中使用呈现Wizard的状态，当Step1完成时，它会改变该状态，然后将在Step2中使用。

这称为Lifting State Up。

Answer 2

props与state一样，是只读的，不应该发生变异。

您应该使用回调：

<Step1 
  dataWizzard={this.state.dataWizzard} 
  updateData={idCreation => 
    this.setState(prevState => ({ 
      dataWizzard: {
        ...prevState.dataWizzard,
        idCreation,
      },
    }))
  } 
/>

然后你在Step1中调用回调：

updateData() {
  this.props.updateData(432876);
}