Antd Tree，：如何默认禁用检查 child

Question

我正在使用 Antd 开发一个 React 项目，我希望能够禁用我的 Tree 组件的检查 childs，所以我只能检查 parent.This is my code

我发现我可以将 checkable : false 添加到我的 child 但我必须创建一个函数来为我呈现一个新的 TreeData ，我可以使用它来代替我的普通数据所以我试过这个 :

const TreeData = (data) => {
        data.map((category) => {
            category.children.map((family) => {
                family.children.map((table) => {
                    table.checkable = false;
                });
            });
        });
    };

但是当我 console.log 收到数据时它 return 未定义.. 所以我的问题是：如何从这个切换：

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 treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        checkable: false,
        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"
          }
        ]
      },
      {
        checkable: false,
        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"
          }
        ]
      },
      {
        checkable: false,
        title: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      {
        checkable: false,
        title: "0-1-0-0",
        key: "0-1-0-0"
      },
      {
        checkable: false,
        title: "0-1-0-1",
        key: "0-1-0-1"
      },
      {
        checkable: false,
        title: "0-1-0-2",
        key: "0-1-0-2"
      }
    ]
  },
  {
    title: "0-2",
    key: "0-2"
  }
];

无需硬更改我的树的第一个数据。谢谢

Answer 1

对于这个问题中描述的特定节点，这可能是将 checkable 设置为 false 的一种可能实现：

  const makeUnCheckable = dataArr => (
    dataArr.map(
      obj => ({
        ...obj,
        children: obj?.children?.map(cObj => ({
          ...cObj,
          checkable: false
        }))
      })
    )
  );

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

这是在 Codesandbox 上显示的结果：

注释:

显示为checked的元素是手动点击的。
节点 0-0-0、0-0-1、0-0-2、0-1-0-0、0-1-0-1、[=20= 没有 check 选项] - 这是 To this

编辑:

在细读 this previous question 时，OP 似乎需要这样的东西：

(叶子节点不可检查的树)

这可以通过递归方法来实现——像这样：

（更改存在于：第 100 到 106 行。以及第 118 行。）

已编辑 - 2 根据以下评论更新。为了识别任何给定 parent/key 的 children，类似下面的内容可能有用：

这里有两种方法。一个是 findKey，它是递归的，得到具有特定 key（比如 0-0-1）的 object。另一个是检查 object 和 key 是否有任何 children，如果有，return children 数组。

Antd Tree，：如何默认禁用检查 child

Antd Tree, : how to Disable checking child by default

javascript

arrays

multidimensional-array

reactjs

antd