动态向导反应

Question

说我有很多看起来像这样的组件：

我想要以下行为：

• 在Component A上，取决于我单选按钮的选择， 当我单击下一个时，Component B或Component C应该呈现 按钮
• 在Component B上，我应该可以通过按“后退”按钮来渲染Component A。

当前，我有一个包含以下内容的主组件： -包含我组件的所有名称的枚举ComponentName -Map<string, ReactNode>，其中包含从所有组件名称到实际组件实例的映射。 -useState钩子：const [currentComponent, setCurrentComponent] = useState<ComponentName>(ComponentName.startComponent)

最后，我的主组件具有一个render函数，该函数可以简单地执行以下操作： <>{componentMap.get(currentComponent.toString())}</>

这可行，但这似乎是一种非常冗长乏味的工作方式。为了维护/更改事物，我必须： -首先确定要更改的常数（即组件的顺序） -确保组件之间的过渡不中断（这容易出错，因为我可能无法手动测试所有内容）

是否有更好的方法来实现相同的行为？如果我可以独立声明每个组件并且没有像现在这样的主组件，我会特别喜欢。

编辑：有一个关于所需最终结果的问题。所有这一切的上下文是，这是用户在通过表单提交内容之前必须经过的向导。用户做出的每个选择都应更改他们看到的组件，以便我们向他们提出相关问题。 React-router和Link与该问题无关。