用react写一个四层子节点的树形控件

好的，以下是一个使用 React 实现的四层子节点的树形控件的完整示例代码：

import React from 'react';

class TreeNode extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false
    };
    this.toggleExpand = this.toggleExpand.bind(this);
  }

  toggleExpand() {
    this.setState(prevState => ({
      expanded: !prevState.expanded
    }));
  }

  render() {
    const { node } = this.props;
    const { expanded } = this.state;
    return (
      <div>
        <div onClick={this.toggleExpand}>{node.name}</div>
        {expanded && node.children && node.children.map(childNode => (
          <TreeNode key={childNode.id} node={childNode} />
        ))}
      </div>
    );
  }
}

class Tree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Level 1, Node 1',
            children: [
              {
                id: 3,
                name: 'Level 2, Node 1',
                children: [
                  {
                    id: 4,
                    name: 'Level 3, Node 1',
                    children: [
                      {
                        id: 5,
                        name: 'Level 4, Node 1'
                      },
                      {
                        id: 6,
                        name: 'Level 4, Node 2'
                      }
                    ]
                  },
                  {
                    id: 7,
                    name: 'Level 3, Node 2',
                    children: [
                      {
                        id: 8,
                        name: 'Level 4, Node 3'
                      },
                      {
                        id: 9,
                        name: 'Level 4, Node 4'
                      }
                    ]
                  }
                ]
              },
              {
                id: 10,
                name: 'Level 2, Node 2',
                children: [
                  {
                    id: 11,
                    name: 'Level 3, Node 3',
                    children: [
                      {
                        id: 12,
                        name: 'Level 4, Node 5'
                      },
                      {
                        id: 13,
                        name: 'Level 4, Node 6'
                      }
                    ]
                  },
                  {
                    id: 14,
                    name: 'Level 3, Node 4',
                    children: [
                      {
                        id: 15,
                        name: 'Level 4, Node 7'
                      },
                      {
                        id: 16,
                        name: 'Level 4, Node 8'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    };
  }

  render() {
    return <TreeNode node={this.state.treeData} />;
  }
}

export default Tree;

在这个例子中，`TreeNode` 组件用于表示每个节点，并具有展开/折叠节点的功能。`Tree` 组件包含整个树形结构的数据，并将其传递给根节点。

这个树形控件有四个级别的子节点，其中每个节点可以展开和折叠其子节点。你可以将其用于显示任何具有分层结构的数据，例如目录结构、导航菜单或组织架构图。