如何创建 React 树视图组件。

快速摘要：在本文中，我们将构建一个可重复使用的反应树组件

React树形视图组件是一个图形用户界面组件，它呈现信息的层级视图，每个条目可以包含多个子条目。它们通常出现在侧边栏、文件管理器等应用中。

让我们从创建树数据开始。这treeData是一个对象数组node。

每个节点对象都有以下字段。

• 钥匙
• 标签
• children：children 字段是一个node对象数组。```javascript

const treeData = [
{
键：“0”，
标签：“文档”，
子项：[
{
键：“0-0”，
标签：“文档 1-1”，
子项：[
{
键：“0-1-1”，
标签：“Document-0-1.doc”，
},
{
键：“0-1-2”，
标签：“Document-0-2.doc”，
},
],
},
],
},
{
键：“1”，
标签：“桌面”，
子项：[
{
键：“1-0”，
标签：“document1.doc”，
},
{
键：“0-0”，
标签：“documennt-2.doc”，
},
],
},
{
键：“2”，
标签：“下载”，
子项：[],
},
];

```javascript


function App() {
  return (
    <div className="App">
      <h1>React Tree View</h1>
      <Tree treeData={treeData} />
    </div>
  );
}

然后，我们创建一个Tree以treeData为 prop 的组件。
该Tree组件通过 进行映射treeData，并返回一个TreeNode以 树node为 prop 的组件。

function Tree({ treeData }) {

  return (

    <ul>

      {treeData.map((node) => (

        <TreeNode node={node} key={node.key} />

      ))}

    </ul>

  );

}

该TreeNode组件包含以下内容。

• 状态showChildren是负责显示Tree组件的状态。
• AhandleClick是切换状态的点击处理函数showChildren。

组件TreeNode显示节点label

如果状态为真，该TreeNode组件还会有条件地渲染组件，并将节点作为 prop传递给组件。TreeshowChildrenchildrenTree

function TreeNode({ node }) {

  const { children, label } = node;


const [showChildren, setShowChildren] = useState(false);


const handleClick = () => {

    setShowChildren(!showChildren);

  };

  return (

    <>

      <div onClick={handleClick} style={{ marginBottom: "10px" }}>

        <span>{label}</span>

      </div>

      <ul style={{ paddingLeft: "10px", borderLeft: "1px solid black" }}>

        {showChildren && <Tree treeData={children} />}

      </ul>

    </>

  );

}

这就是结果。