ant-design checkedKeys 传入父节点key子节点不自动选中

`ant-design` 的 `Tree` 组件中的 `checkedKeys` 属性是用来控制哪些节点被选中的，若只传入父节点的 `key`，则子节点不会自动选中。因为 `checkedKeys` 仅仅是一个数组，用来存储当前选中的节点的 `key`，如果需要让子节点自动选中，可以使用递归的方式将子节点的 `key` 加入到 `checkedKeys` 数组中。

以下是一个简单的示例代码，实现了父节点选中后，子节点自动选中：

import React, { useState } from 'react';
import { Tree } from 'antd';

const { TreeNode } = Tree;

const treeData = [
  {
    title: 'parent 1',
    key: '1',
    children: [
      {
        title: 'child 1-1',
        key: '1-1',
      },
      {
        title: 'child 1-2',
        key: '1-2',
      },
    ],
  },
  {
    title: 'parent 2',
    key: '2',
    children: [
      {
        title: 'child 2-1',
        key: '2-1',
      },
    ],
  },
];

const App = () => {
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeys) => {
    setCheckedKeys(checkedKeys);
  };

  const onParentCheck = (checked, { node }) => {
    const { key, children } = node;
    const newCheckedKeys = [...checkedKeys];
    if (checked) {
      // 父节点选中，递归将子节点加入 checkedKeys 中
      const childKeys = children.map((child) => child.key);
      newCheckedKeys.push(key, ...childKeys);
    } else {
      // 父节点取消选中，递归将子节点从 checkedKeys 中删除
      const childKeys = getChildrenKeys(key);
      const keysToRemove = [key, ...childKeys];
      newCheckedKeys = newCheckedKeys.filter((key) => !keysToRemove.includes(key));
    }
    setCheckedKeys(newCheckedKeys);
  };

  const getChildrenKeys = (parentKey) => {
    const parent = treeData.find((node) => node.key === parentKey);
    if (!parent) return [];
    const childKeys = parent.children.map((child) => child.key);
    const grandChildKeys = parent.children
      .filter((child) => child.children)
      .map((child) => getChildrenKeys(child.key))
      .flat();
    return [...childKeys, ...grandChildKeys];
  };

  return (
    <Tree
      checkable
      checkedKeys={checkedKeys}
      onCheck={onCheck}
      onCheck={onParentCheck}
    >
      {treeData.map((node) => (
        <TreeNode title={node.title} key={node.key}>
          {node.children &&
            node.children.map((child) => (
              <TreeNode title={child.title} key={child.key} />
            ))}
        </TreeNode>
      ))}
    </Tree>
  );
};

export default App;

在上面的代码中，我们通过定义一个 `onParentCheck` 函数来监听父节点的选中事件。当父节点被选中时，我们使用递归的方式将子节点的 `key` 加入到 `checkedKeys` 数组中。当父节点取消选中时，我们也使用递归的方式将子节点的 `key` 从 `checkedKeys` 数组中删除。`getChildrenKeys` 函数用来获取某个节点的所有子孙节点的 `key`。这样，当父节点被选中时，所有子孙节点都会被选中。