arrays - Ant Design TreeSelect 将 API 中的数据映射到标题值键

Question

我正在尝试从 API 填充ANT 设计中的树选择，API 响应类型是如此

projectData = ProjectData[];

export type ProjectData = {
    key?: number;
    projectId: number;
    projectName: string;
    description: string;
    level: number;
    parent: string;
    parentId: number;
    children: ProjectData[];
};

对于TreeSelect，我找不到设置和设置title的选项projectNamevalueprojectId

树选择采用treeData这种格式的值

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
  },
];

例如，如果我在 ant design 中使用CascaderfieldNames ，我可以像这样使用道具设置映射

fieldNames={{ label: 'projectName', value: 'projectId', children: 'children' }}

有可能用 TreeSelect 做这样的事情吗？

我有一个ProjectData[]如上所述的，我需要使用该数据生成一个树选择。什么是最好的方法？

现在，如果我使用 Cascader，我只能选择 Last(deepest) 条目，而不是作为父节点的节点。因此我必须使用 Treeselect 并且无法弄清楚如何正确映射它。

- - - - 编辑 - - - - - -

在代码和框上添加了一个数据示例，其中实现了级联和树选择

标签： arraysreactjstypescriptmappingantd

Answer 1

阅读文档后，您似乎可以通过 prop 来做到这一点treeDataSimpleMode。这会将treeData嵌套对象的预期格式更改children为平面数组，其中每个对象都有自己的id和父 id pId。看来我们可以指定属性名称id，pId这正是您想要的。我们可以treeNodeLabelProp从"label"to"projectName"和treeNodeFilterPropfrom "value"to更改"projectId"。

所以看起来这可能就是你所需要的：

const MyTree = ({projectData}: {projectData: ProjectData[]}) => {
  return (
    <TreeSelect
      treeData={projectData}
      treeDataSimpleMode={{
        id: 'projectId',
        pId: 'parentId',
        //rootPId can be set too
      }}
      treeNodeLabelProp="projectName"
      treeNodeFilterProp="projectId"
    />
  )

如果没有样本数据，我无法真正对此进行测试，所以如果您遇到任何错误，请告诉我。

请注意，antd 包中的类型不够严格，无法检测到格式的变化。该DataNode接口使所有预期的属性都是可选的，并具有字符串索引签名以允许任何自定义属性。

export interface DataNode {
    value?: RawValueType;
    title?: React.ReactNode;
    label?: React.ReactNode;
    key?: Key;
    disabled?: boolean;
    disableCheckbox?: boolean;
    checkable?: boolean;
    children?: DataNode[];
    /** Customize data info */
    [prop: string]: any;
}