Redux表单决策树

Question

我正在处理一个复杂的表单流程，该流程可以带给用户3个不同的方向。例如，在流程的某一时刻，用户可以选择是否注册accountTypeA或accountTypeB。根据复选框的选择，它们应被定向到两个屏幕之一。我已经基于Redux Form示例向导设置了向导，但是不知道如何使上一个和下一个按钮了解决策树。任何建议表示赞赏。这是我的容器组件：

class WizardForm extends Component {
 constructor(props, context) {
 super(props, context);

 this.nextPage = this.nextPage.bind(this);
 this.previousPage = this.previousPage.bind(this);
 this.state = {
  page: 1,
  customers: []
 };
}

nextPage() {
  this.setState({ page: this.state.page + 1 });
}

previousPage() {
  this.setState({ page: this.state.page - 1 });
}

customersRow (customer, index) {
 return <div key={index}>{customer.title} </div>;
}

render() {
  const { onSubmit} = this.props;
  const { page } = this.state;
  return (
   <div className="form-individual-1">

    {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />}
    {page === 2 &&
      <WizardFormSecondPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
    {page === 3 &&
      <WizardFormThirdPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 4 &&
      <WizardFormFourthPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 5 &&
      <WizardFormFifthPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 6 &&
      <WizardFormSixthPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 7 &&
      <WizardFormSeventhPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 8 &&
      <WizardFormEighthPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 9 &&
      <WizardFormNinthPage
        previousPage={this.previousPage}
        onSubmit={this.nextPage}
      />}
      {page === 10 &&
      <WizardFormTenthPage
        previousPage={this.previousPage}
        onSubmit={onSubmit}
      />}

  </div>
);
 }
 }