前端react出参配置递归嵌套页面

import { request } from '@umijs/max';
import { Button, Input, Select, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
const App = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  //初始化数据
  useEffect(() => {
    setLoading(true);
    request('请求地址', {
      method: '请求方式',
    }).then((res) => {
      setLoading(false);
      
      });
    //数据处理，按需求更改
      for (let i = 0; i < firstData.length - 1; i++) {
        for (let j = i; j < firstData.length; j++) {
          if (firstData[i].key == firstData[j].parentKey) {
            firstData[i].children.push(firstData[j]);
            firstData.splice(j, 1);
            j--;
          }
        }
      }
      setData([...firstData]);
    });
  }, []);
  const columns = [
    {
      title: '字段key',
      dataIndex: 'key',
      key: 'key',
      width: '30%',
      render: (_, record) => {
        return (
          <Input
            style={{ width: '50%' }}
            placeholder="请输入字段key"
            value={record.key}
            disabled
          />
        );
      },
    },
    {
      title: '字段名称',
      dataIndex: 'paramName',
      key: 'paramName',
      width: '20%',
      render: (_, record) => {
        return (
          <Input
            style={{ width: '70%' }}
            placeholder="请输入字段名称"
            defaultValue={record.paramName ? record.paramName : ''}
            onBlur={(e) =>
              changeName(data, record.key, e.target.value, record.paramName)
            }
          />
        );
      },
    },
    {
      title: '字段类型',
      dataIndex: 'columnType',
      width: '15%',
      key: 'columnType',
      render: (_, record) => {
        return (
          <Select
            style={{ width: '70%' }}
            placeholder="请选择字段类型"
            defaultValue={record.type}
            onChange={(value) => changeType(data, record.key, value)}
            options={[
              { value: '2', label: 'Number' },
              { value: '1', label: 'String' },
              { value: '4', label: 'Object' },
              { value: '5', label: 'Boolean' },
              { value: '3', label: 'Array' },
            ]}
          ></Select>
        );
      },
    },
    {
      title: '字段描述',
      dataIndex: 'description',
      width: '20%',
      key: 'description',
      render: (_, record) => {
        return (
          <Input
            style={{ width: '70%' }}
            placeholder="请输入字段描述"
            defaultValue={record.description ? record.description : ''}
            onBlur={(e) =>
              changeDescription(
                data,
                record.key,
                e.target.value,
                record.description,
              )
            }
          />
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'do',
      width: '30%',
      key: 'do',
      render: (_, record) => {
        console.log();
        return (
          <Space>
            {record.parentKey == '0' ? (
              <Button onClick={() => addBroNode()}>添加兄弟节点</Button>
            ) : (
              ''
            )}

            {record.columnType == '4' ? (
              <Button onClick={() => addChildrenNode(data, record.key)}>
                添加子节点
              </Button>
            ) : (
              ''
            )}

            <Button onClick={() => deleteNode(data, record.key)}>删除</Button>
          </Space>
        );
      },
    },
  ];
  //修改字段名称
  const changeName = (sourceData, key, value, defaultValue) => {
    console.log(sourceData, key, value);
    const nameChange = (data) => {
      data?.forEach((item) => {
        if (item.key === key) {
          item.paramName = value ? value : defaultValue;
          console.log(sourceData);
          setData([...sourceData]);
        } else {
          nameChange(item.children);
        }
      });
    };
    nameChange(sourceData);
  };
  //修改字段描述
  const changeDescription = (sourceData, key, value, defaultValue) => {
    console.log(sourceData, key, value);
    const descriptionChange = (data) => {
      data?.forEach((item) => {
        if (item.key === key) {
          item.description = value ? value : defaultValue;
          console.log(sourceData);
          setData([...sourceData]);
        } else {
          descriptionChange(item.children);
        }
      });
    };

    descriptionChange(sourceData);
  };
  //修改字段类型
  const changeType = (sourceData, key, value) => {
    console.log(sourceData, key, value);
    const typeChange = (data) => {
      data?.forEach((item) => {
        if (item.key === key) {
          item.columnType = value;
          console.log(sourceData);
          setData([...sourceData]);
        } else {
          typeChange(item.children);
        }
      });
    };

    typeChange(sourceData);
  };

  //添加兄弟节点
  const addBroNode = (key) => {
    setData([
      ...data,
      {
        key: Date.now(),
        paramName: '',
        age: null,
        description: '',
        parentKey: '0',
        columnType: '',
        children: [],
      },
    ]);
  };
  //添加子节点
  const addChildrenNode = (yuanData, parentId) => {
    const addChildren = (data) => {
      data?.forEach((item) => {
        if (item.key === parentId) {
          item.children.push({
            parentKey: parentId,
            key: Date.now(),
            paramName: '',
            columnType: '',

            description: '',
            children: [],
          });
          console.log(yuanData);
          setData([...yuanData]);
        } else {
          addChildren(item.children);
        }
      });
    };

    addChildren(yuanData);
  };

  //删除节点
  const deleteNode = (yuanData, parentId) => {
    const NodeDelete = (data) => {
      data?.forEach((item, i) => {
        if (item.key === parentId) {
          data.splice(i, 1);
          setData([...yuanData]);
        } else {
          NodeDelete(item.children);
        }
      });
    };
    NodeDelete(yuanData);
  };
  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={false}
      />
    </>
  );
};
export default App;

上述代码只是实现初步布局，有很多复用代码，没有来得及做优化，仅供参考