react 组件连动效果_react实现多级联动组件

需求

实现点击一级域显示二级域，点击二级域显示三级域，以此类推。需要完成一个通用版多级域的联动。

思路

数据结构是可以自己定义，所以首先需要考虑所需要的数据结构。

自己定义的数据结构为：

dataSource: [

{id: 1, domain: "一级域1", children: [{id: 11, domain: "二级域11", children: [{id: 111, domain: "三级域111"}]}, {id: 12, domain: "二级域12", children: [{id: 112, domain: "三级域112", children: [{id: 1111, domain: "四级域1111"}]}]}]},

{id: 2, domain: "一级域2", children: [{id: 21, domain: "二级域21", children: [{id: 211, domain: "三级域211"}]}, {id: 22, domain: "二级域22", children: [{id: 212, domain: "三级域212"}]}]},

{id: 3, domain: "一级域3", children: [{id: 31, domain: "二级域31", children: [{id: 311, domain: "三级域311"}]}, {id: 32, domain: "二级域32", children: [{id: 312, domain: "三级域312"}]}]},

{id: 4, domain: "一级域4", children: [{id: 41, domain: "二级域41", children: [{id: 411, domain: "三级域411"}]}, {id: 42, domain: "二级域42", children: [{id: 412, domain: "三级域412"}]}]},

{id: 5, domain: "一级域5", children: [{id: 51, domain: "二级域51", children: [{id: 511, domain: "三级域511"}]}, {id: 52, domain: "二级域52", children: [{id: 512, domain: "三级域512"}]}]}]

以此可直接取到对象的下一级域

需要记录一个数组data来渲染上级当前级下级的域名 data: [[一级域], [二级域], [三级域]...]

需要记录一个已选择的域来渲染当前级已选择的域 selectItems: ["一级域1", "二级域1"]

渲染出来的组件中添加点击事件，此时可以拿到当前点击的对象，点击域的层级，index索引值。而后获取到当前对象后，若当前对象有children则截取数组data至当前对象这一层级(点击事件可以获取到)，并将当前对象的children记录到data中的下一级域，此时即可实现联动，selectItems中记录当前对象的domain以渲染当前域选中的域名。

完成后的自查

对数据结构这一部分敏感性有待加强，因为考虑数据问题而花费了太多的时间，主要是这个数据结构的思路影响了整个组件的进度。

项目地址