如何开发一个屏幕，在多个流程中呈现相似/相同的屏幕
我正在用 React 开发一个网站。
在这个网站中，我有一个屏幕 - 让我们称之为“预约”
我有多个流程：
- 为现有客户预约
- 为不存在客户预约> 客户
预约是流程 1 和 2 的一部分，略有不同：
- 一些按钮仅显示在其中一个
- “下一步”按钮中，该按钮将用户带到不同的屏幕，
- 对渠道的影响不同
- 当然每个按钮 其中一个是在不同的 URL
- 等等...
问题：哪种方法是在 React 中开发此类屏幕的最佳实践？ 我想到的选项是：
- 创建一个屏幕，根据状态显示相关按钮和操作
- 为每个流程复制屏幕（因为其中存在细微差别）
我对反应还很陌生。试图在这里和谷歌寻找答案，但找不到我的答案。
I am developing a website in React.
In this website I have a screen - lets call it "book-an-appointment"
And I have multiple flows:
- book an appointment for existing client
- book an appointment for non-existing client
book-an-appointment is part of flow 1 and 2, with slight differences:
- some buttons that are shown only in one of them
- "next" button that takes the user to a different screen
- it affects differently on the funnels
- of course each one of them is in a different URL
- and more...
Question: Which approach is best practice in developing such screen in react?
options I thought about are:
- Creating A single screen that shows the relevant buttons and actions according to the state
- Duplicating the screen for each flow (because of the small differences in it)
I am quite new to react. tried to look for an answer here and in google but couldnt find my answer.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在这种情况下，我将仅使用一个带有不同流量的Ether两个子组件的父组件。您可以在有条件地添加特定键的情况下制作一个JSON对象，然后可以检查是否存在ISEDECTING字段，例如它是什么样的预订，并显示现有的用户流程组件。
您可以这样做，或者有一个组件，只有有条件地隐藏字段，具体取决于它的预订类型。在这种情况下，您将使用条件渲染。有关更多信息，请参见下面的文章。
https：// https：//reactjs.s.orgg/docs/docs/conditional -rendering.html＃inline-if-if-with-logical-operator
In that case I would just use one Parent component with ether two child components with the different flows. You can make one JSON object where conditionally you add specific keys and you can later check if the isExisting field exists for example what kind of booking it is and show a the existing user flow component.
You could do it like that or have one component that just conditionally hides fields depending on what type of booking it is. In this case you would use conditional rendering. See the article below for more info.
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator