Ant Design Tree组件如何根据后端checked字段设置复选框默认勾选

要实现根据后端返回树形数据的checked字段设置Tree组件默认勾选状态，只需递归遍历所有节点，收集所有checked: true的节点key，作为checkedKeys的初始值即可。

首先实现递归收集key的函数：

// 递归遍历树形数据，收集checked为true的节点key
const getDefaultCheckedKeys = (tree) => {
  let keys = []
  tree.forEach(node => {
    if (node.checked) keys.push(node.key)
    if (node.children?.length) {
      keys = keys.concat(getDefaultCheckedKeys(node.children))
    }
  })
  return keys
}

然后修改Demo组件中checkedKeys的初始化逻辑，其余原有代码保持不变即可：

const Demo = () => {
  // 用处理后的key数组作为勾选状态初始值
  const [checkedKeys, setCheckedKeys] = useState(getDefaultCheckedKeys(treeData));
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0", "0-0-1"]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue) => {
    console.log("onCheck", checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue, info) => {
    console.log("onSelect", info);
    setSelectedKeys(selectedKeysValue);
  };

  return (
    <Tree
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={treeData}
    />
  );
};

如果不需要父子节点勾选联动，可以给Tree组件添加checkStrictly属性。

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