如何在React中创建一个多级选项列表？

Question

我想在React中使用react状态和props创建多级选项列表。我可以在react状态下使用2d数组在2个级别上工作，但不确定如何使其在3个级别上工作。

例如

1st page 

Option 1 , Option 2, Option 3

> if user selects Option 1

2nd Page 

Option 1.a, Option 1.b, Option 1.c 

> if user selects 1.b 

3rd Page 

Final Result of choosing Option 1 & Option 1.b

Answer 1

我可能会选择一种更简单的方法。

如果您知道需要哪些选项。然后为第一个选项制作一个数组：

const firstPageArray = [Option1, Option2, Option3];

然后存储在组件状态下选择的内容，假设用户选择了Option1。然后使用this.setState({firstPageSelection: Option1});

基于该状态下的内容，您可以渲染第二个数组：

const secondPageArray = [Option1.a, Option1.b, Option1.c];

与以前相同，并根据所选选项将组件的状态设置为this.setState({secondPageSelection: Option1.a});

对于最终要求，您可以使用已存储的2种状态来显示消息。

希望这会有所帮助！