zoukankan      html  css  js  c++  java
  • 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以渲染当前域选中的域名。

    完成后的自查

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

    项目地址

    react实现多级联动组件

  • 相关阅读:
    flink 读取kafka 数据,partition分配
    Flink 报错 "Could not find a suitable table factory for 'org.apache.flink.table.factories.StreamTableSourceFactory' in the classpath"
    flume接收http请求,并将数据写到kafka
    【翻译】Flume 1.8.0 User Guide(用户指南) Processors
    【翻译】Flume 1.8.0 User Guide(用户指南) Channel
    【翻译】Flume 1.8.0 User Guide(用户指南) Sink
    【翻译】Flume 1.8.0 User Guide(用户指南) source
    【翻译】Flume 1.8.0 User Guide(用户指南)
    Apache Flink 简单安装
    Java之使用IDE
  • 原文地址:https://www.cnblogs.com/chengquanomg/p/12620232.html
Copyright © 2011-2022 走看看