实现前端组件的树型数据结构

Question

我正在计划一个简单的web应用程序。向用户呈现具有两个或三个可能答案的问题。根据他们的回答，他们会被带到另一个问题。

即

                                            ChoiceC
               ChoiceA ---> Question 2 ---> ChoiceD
Question 1 -->                              
               ChoiceB ---> Question 3 ---> ChoiceE
                                            ChoiceF

在我看来，这就像一棵树，其中每个问题和答案都是一个节点，根据您所走的路径，您将暴露于一组特定的其他问题/答案。

我正在尝试找出如何使用可重用的React组件来实现这一点。我可能会为每个问题创建一个组件，但这似乎不是一个好的做法。有没有人有构建这种“选择你自己的冒险”风格的问卷的经验？

Answer 1

您可以使用map为每个答案保存下一个问题。

在您的示例中，条目可以是ChoiceA，Question2。在您的程序中，您可以编写一个根据您的地图更新的变量current_question的故事。

只有当相同的答案在不同的上下文中出现并导致不同的结果时，这种解决方案才可能是不够的。在这种情况下，可能应该是一个问题/答案对，它决定了接下来会发生什么。

如果你真的想夸大你的问题，你可以实现一个有向标签图。在这种情况下，问题将是节点，边标签是您的答案，这些答案将导致下一个问题/节点。

当然，最实用的解决方案是根本不使用数据结构，只使用if-else堆栈。但这是不可伸缩的。