SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
const { createRoot } = ReactDOM;
const { useState } = React;
const { Tree } = antd;
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          {
            title: "0-0-0-0",
            key: "0-0-0-0"
          },
          {
            title: "0-0-0-1",
            key: "0-0-0-1"
          },
          {
            title: "0-0-0-2",
            key: "0-0-0-2"
          }
        ]
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          {
            title: "0-0-1-0",
            key: "0-0-1-0"
          },
          {
            title: "0-0-1-1",
            key: "0-0-1-1"
          },
          {
            title: "0-0-1-2",
            key: "0-0-1-2"
          }
        ]
      },
      {
        title: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      {
        title: "0-1-0-0",
        key: "0-1-0-0"
      },
      {
        title: "0-1-0-1",
        key: "0-1-0-1"
      },
      {
        title: "0-1-0-2",
        key: "0-1-0-2"
      }
    ]
  },
  {
    title: "0-2",
    key: "0-2"
  }
];

const treeMap = {};

function setParent(tree) {
  treeMap[tree.key] = tree;

  if (tree.children) {
    tree.children.forEach((c) => {
      c.parent = tree.key;
      setParent(c);
    });
  }
}

treeData.forEach((t) => setParent(t));

console.log("tree data", treeData);
console.log("tree map", treeMap);

const App = () => {
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0", "0-0-1"]);
  const [checkedKeys, setCheckedKeys] = useState({
    checked: [],
    halfChecked: []
  });
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const updateAllChildren = (node, results) => {
    results.push(node.key);

    if (node.children) {
      node.children.forEach((c) => {
        updateAllChildren(c, results);
      });
    }
  };

  const onCheck = (checkedKeysValue, info) => {
    console.log("onCheck", info);
    const { checked } = checkedKeys;
    setCheckedKeys({ checked: [...checked, info.node.title] });

    const isChecked = !checked.includes(info.node.title);
    const results = [];
    updateAllChildren(info.node, results);
  debugger
    if (isChecked) {
      setCheckedKeys({ checked: [...checked, ...results] }); //Set
    } else {
      setCheckedKeys({
        checked: [...checked.filter((d) => !results.includes(d))]
      }); //Set
    }
  };
  const onSelect = (selectedKeysValue, info) => {
    console.log("onSelect", info);
    setSelectedKeys(selectedKeysValue);
  };
  return (
    <Tree
      checkable
      onExpand={onExpand}
      checkStrictly
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={treeData}
    />
  );
};
const ComponentDemo = App;

createRoot(mountNode).render(<ComponentDemo />);


            
    <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <meta name="theme-color" content="#000000">
        </head>
        <body>
          <div id="container" style="padding: 24px" />
          <script>const mountNode = document.getElementById('container');</script>
        </body>
      </html>