如何开发一个在多个流程中呈现相似/相同屏幕的屏幕

Question

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:

1. book an appointment for existing client
2. 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.

Answer 1

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