antDesign+react 实现选择不同的下拉框出现不同的组件

Posted 2023-04-27

参考技术A 在选择不同的下拉框的时候出现不同的组件，具体的实现效果就是：

我具体的做法是，在第一个下拉框作为一个控制组件，后面的显示结果通过判断第一个下拉框选择的不同值进行显示的划分。
首先先对第一个组件进行封装,，该文件的文件名的index.js：

现在我们对子组件进行封装，子组件的文件名为SwitchInterval.js ：

React+AntDesign使用Tree树控件完整展现其中的层级关系，并具有展开收起选择等交互功能

(一)需求展示效果图

1.新增时树形控件展示效果

2.编辑时树形控件展示效果

(二)实现代码

1.使用树形控件，选择自己需要实现的功能的相关调用方法跟值

2.触发事件时获取数据及控件展示问题

(三)关于树形结构转化说明

如果后台传过来的树形数据跟展示不同，就需要前台这边自己进行处理

比如这次后台传过来的数据格式：

1.可以通过遍历，点扩展运算符获取数据每项做对应数据转化处理。


2.也可以使用递归的方法进行一个树或者森林的遍历。下面是同样的树数据，但是有判断筛选处理。