react-bolawen-tree

2024年06月07日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

2.1 Tree.tsx

import "./tree.scss";
import React from "react";

interface TreeNode {
  label: string;
  id: number | string;
  pid: number | string;
  children?: TreeNode[];
}

interface TreeProps {
  data: TreeNode[];
}

interface IndentProps {
  level: number;
}

const Indent = (props: IndentProps) => {
  const list = [];
  const { level } = props;
  const baseItemClassName = "tree-node-indent-list-item";

  for (let i = 0; i < Number(level); i++) {
    list.push(<span key={i} className={`${baseItemClassName}`}></span>);
  }

  return <div className="tree-node-indent-list">{list}</div>;
};

const Tree: React.FC<TreeProps> = ({ data }) => {
  const renderTree = (nodes: TreeNode[], paraent: { level: number }) => {
    const { level } = paraent;

    return nodes.map((node) => {
      return (
        <div className="tree-node" key={node.id}>
          <Indent level={level} />
          <span className="tree-node-label">{node.label}</span>
          {node.children &&
            renderTree(node.children, {
              level: level + 1,
            })}
        </div>
      );
    });
  };

  return (
    <div className="tree">
      {renderTree(data, {
        level: 0,
      })}
    </div>
  );
};

export default Tree;

2.2 Tree.scss

.tree {
    .tree-node {
      .tree-node-indent-list {
        height: 0;
        display: inline-block;
        .tree-node-indent-list-item {
          width: 16px;
          display: inline-block;
        }
      }
    }
  }

三、实现

---

import Tree from "./components/Tree1/tree";

function App(){
  const data = [
    {
      id: 1,
      pid: 0,
      label: "1",
      children: [
        {
          id: 11,
          pid: 1,
          label: "1-1",
          children: [
            {
              id: 111,
              pid: 11,
              label: "1-1-1",
            },
            {
              id: 112,
              pid: 11,
              label: "1-1-2",
            },
          ],
        },
        {
          id: 12,
          pid: 1,
          label: "1-2",
          children: [
            {
              id: 121,
              pid: 12,
              label: "1-2-1",
            },
            {
              id: 122,
              pid: 12,
              label: "1-2-2",
            },
          ],
        },
      ],
    },
    {
      id: 2,
      pid: 0,
      label: "2",
      children: [
        {
          id: 21,
          pid: 2,
          label: "2-1",
          children: [
            {
              id: 211,
              pid: 21,
              label: "2-1-1",
            },
            {
              id: 212,
              pid: 21,
              label: "2-1-2",
              children: [
                {
                  id: 2121,
                  pid: 212,
                  label: "2-1-2-1",
                },
                {
                  id: 2122,
                  pid: 212,
                  label: "2-1-2-2",
                },
              ],
            },
          ],
        },
        {
          id: 22,
          pid: 2,
          label: "2-2",
          children: [
            {
              id: 221,
              pid: 22,
              label: "2-2-1",
            },
            {
              id: 222,
              pid: 22,
              label: "2-2-2",
            },
          ],
        },
      ],
    },
  ];

  return <div className="app">
    <Tree data={data}></Tree>
  </div>
}

export default App;