React项目中如何基于给定代码动态生成Checkbox Tree？

我正在React项目中复刻Checkbox Tree的设计（设计图为带连接线的层级复选框树形结构），现在有一个可运行的静态示例代码，但不知道怎么用它来动态生成树形结构。想请教能不能基于现有代码实现动态生成并还原设计？我担心数据映射时伪类样式（Pseudo styling）会出问题，我的数据结构如下：

[
  {
    value: 1,
    data: "data",
    children: [],
  },
  {
    value: 2,
    data: "data2",
    children: [],
  },
  {
    value: 3,
    data: "data3",
    children: [
      {
        value: 1,
        data: "data",
        children: [],
      },
    ],
  },
];

现有静态代码：

CSS代码 #

.what {
  margin-right: 15px;
}
  
ul.tree,
ul.tree ul {
  padding-bottom: 5px;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

ul.tree ul {
  margin-top: 5px;
  margin-left: 20px;
}

ul.tree li {
  padding-bottom: 5px;
  margin-left: 0.60em;
  border-left: thin solid #000;
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  width: 0.9em;
  height: 0.6em;
  margin-right: 0.1em;
  vertical-align: top;
  border-bottom: thin solid #000;
  content: "";
  display: inline-block;
}

ul.tree li:last-child:before {
  border-left: thin solid #000;
}

HTML代码 #

<ul class="tree"><input class="what" type="checkbox" />Root</ul>
<ul class="tree">
  <li><input class="what" type="checkbox" /> Animals </li>
  <li><input class="what" type="checkbox" /> Animals
    <ul class="tree">
      <li><input class="what" type="checkbox" /> Animals </li>
    </ul>
  </li>
</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>

完全可以基于现有代码实现动态生成，而且伪类样式不会有问题——只要递归生成的DOM结构和静态示例一致，CSS的伪类就能正常生效。下面是具体实现步骤：

1. 核心思路 #

用React递归组件遍历你的树形数据，生成和静态HTML结构完全一致的DOM节点，这样现有CSS无需修改就能直接复用。

2. 具体实现代码 #

递归TreeItem组件 #

负责渲染单个节点，包含复选框、节点文本，以及子节点列表：

const TreeItem = ({ node }) => {
  return (
    <li>
      <input className="what" type="checkbox" />
      {node.data}
      {node.children.length > 0 && (
        <ul className="tree">
          {node.children.map(child => (
            <TreeItem key={child.value} node={child} />
          ))}
        </ul>
      )}
    </li>
  );
};

顶层Tree组件 #

遍历根节点数组，生成每个根节点的树形结构：

const Tree = ({ data }) => {
  return (
    <div>
      {data.map(rootNode => (
        <ul className="tree" key={rootNode.value}>
          {rootNode.children.length === 0 ? (
            // 没有子节点的根节点直接渲染复选框+文本
            <>
              <input className="what" type="checkbox" />
              {rootNode.data}
            </>
          ) : (
            // 有子节点的根节点用TreeItem渲染
            <TreeItem node={rootNode} />
          )}
        </ul>
      ))}
    </div>
  );
};

组件使用示例 #

const App = () => {
  const treeData = [
    { value: 1, data: "data", children: [] },
    { value: 2, data: "data2", children: [] },
    { value: 3, data: "data3", children: [{ value: 1, data: "data", children: [] }] },
  ];

  return <Tree data={treeData} />;
};

export default App;

3. 伪类样式说明 #

你担心的伪类问题完全不需要顾虑：递归生成的DOM结构和静态HTML完全匹配，ul.tree、li的层级关系和静态示例一致，所以li:last-child、li:before这些伪类选择器会自动匹配到对应的元素，线条样式会正常显示。

4. 可选扩展：复选框状态管理 #

如果需要处理复选框的选中/半选状态（比如父节点全选子节点、子节点部分选中时父节点半选），可以给TreeItem组件添加状态管理逻辑，比如用useState或者状态库维护选中状态，核心的树形结构渲染已经解决你的问题。

内容的提问来源于stack exchange，提问作者Gusic industry