Question

我正在考虑使用React在我的应用程序中实现动态向导。以下是用例：

流程由不具有固定顺序的步骤（或页面）组成。流程的顺序可以根据业务逻辑而改变。
每个步骤都由以即插即用的方式工作的组件组成。可以根据业务需求在不同配置的同一步骤或多个步骤中重用组件。例如。地址可以是一个组件，可以以信用卡帐单地址或银行帐户业务地址的形式在同一步骤中使用。
每个组件都绑定到后端api以实现数据持久性。
流程是为了维持用户状态。说明已完成的步骤，继续并保存功能。

在我看来，以下将是此流程的模板：

<App>
    <Flow>
        <Step1>
            <Component1 ...props/>
            <Component2 ...props/>
            <Component3 ...props/>
        </Step1>
        <Step2>
            <Component1 ...props/>
            <Component4 ...props/>
            <Component5 ...props/>
        </Step2>
    </Flow>
</App>

上述标记中的步骤和组件的顺序可以是动态的。

由于以下考虑因素，我不确定反应是否适合这种情况：

服务器将决定步骤和组件的顺序和组成，因为调用下游服务来确定流。 React无法管理这个。
由于组件的html标记将驻留在JSX中，因此所有组件都必须预先捆绑在一起。我不确定是否可以利用树木摇动来根据网址路线优化捆绑。
用户状态将由Server和React处理。根据用户状态，Server将决定步骤和组件的顺序，React将在前端拥有渲染逻辑。

我的观点是，这是企业应用程序中的常见模式。我正在寻找关于如何在这种情况下使用反应的例子。

Answer 1

自从我试图实现与我的应用程序类似的东西以来，我已经对此进行了思考。这是我想出的：

使用向导表单时，需要包装。通过向导进行操作。

在我的情况下，我必须向服务器发送请求并确定是否需要新的步骤。为了使此响应动态发生，您必须为从服务器收到的每个响应创建一个密钥。

因此，每次都需要在redux状态下创建新的阶跃响应：

body {
  height: 200px;
  width: 400px;
}
body {
  border: 1px solid black;
}

div {
  display: inline-block;
  width: 49%;
  height: 25%;
  position: relative;
  transition: width 2s, height 4s;
  transition-delay: 2s;
}

div:hover {
  z-index: 100;
  width: 100%;
  height: 100%;
}

div:nth-of-type(1) {
  background: #eee;
}

div:nth-of-type(2) {
  background: #bbb;
}

div:nth-of-type(3) {
  background: #999;
}

div:nth-of-type(4) {
  background: #666;
}

每次通过推送新的键值对来接收新步骤的更新状态。如果您保存这样的问题，则可以单击上一个按钮并导航到特定键。

最后，按组件包装向导并映射您的步骤。每当服务器收到新步骤时，它都会动态创建一个新步骤。

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

并在同一组件中处理从服务器收到的所有步骤，本例中为state={ steps:[{key, step1},{key,step2}] }

使用Redux进行动态向导

1 个答案: