reactjs - 在 ReactJS 中更改 View

Question

我使用 ReactJS 的时间并不长。我有一种情况，我认为一定很常见，但我没有在任何示例中看到它得到解决，我想知道是否涉及任何最佳实践。

场景很简单，就是说我的应用程序中有 3 个表单:FormA、FormB 和 FormC。我将每个表单编写为单独的 ReactJS 组件。当用户登陆该站点时，会显示 FormA。根据 FormA 上的输入，接下来将显示 FormB 或 FormC，完全替换页面上的 FormA。

我不认为“路由”是答案，因为我不希望 URL 反射(reflect)当前应用程序状态，也不希望用户能够通过更改 URL 来更改表单。表单(组件)的切换应该仅基于业务规则来完成。

我知道 ReactJS 不是一个框架，但这似乎是一个足够常见的场景，一些有用的模式可能已经围绕它发展起来。只要朝着正确的方向插入就会非常有帮助。谢谢。

Answer 1

解决方案是创建包含 FormA、FormB、FormC 的包装 Form 组件，并显示以下之一它们取决于其状态。喜欢

const Form = React.createComponent({

  getInitialState() {
    return {
      form: 'formA'
      /* other state */
    }
  },

  render() {
    return (
      <div>
        {this.state.form === 'formA' ? <FormA onSubmit={this.saveFormData} /> : null}
        {this.state.form === 'formB' ? <FormB onSubmit={this.saveFormData} /> : null}
        {this.state.form === 'formC' ? <FormC onSubmit={this.saveFormData} /> : null}
      </div>
    )
  },

  saveFromData() {
    /* set state here */
  }

})

这种委托(delegate)对于 React 来说很常见。通常，您应该在 Form 中管理表单逻辑，并且 FormA、FormB、FormC 应该是 dumb components只能执行传递的 props 中的函数。

请注意，上面列出的示例代码只是一个演示。通常您不需要保持 form 的状态。相反，可以有 i。 e. 用户名、密码、电子邮件(或任何内容)，您应该根据此状态值检查要显示的表单。