Question

我尝试将Tree示例从antd转换为使用TypeScript，但是child-render函数不会返回任何内容。当我删除注释时，注释行将呈现。

RenderTreeNodes函数正在为数组中的每个元素运行。我也尝试过使用const-箭头功能。

我该如何使用打字稿？

简化代码

import React from "react"
import { Tree } from "antd";
import "./GeoFilter.css";
const { TreeNode } = Tree;

export const geoData = [{
  "value": "1|dl|1",
  "title": "Campingområdet",
  "children": [{
    "value": "1|dl|1 | C1",
    "title": "Södra Campingområdet",
    "children": undefined
  }, {
    "value": "1|dl|1 | C2",
    "title": "Östra Campingområdet",
    "children": undefined
  }
  ]
}, {
  "value": "1|PR|2",
  "title": "Stugområdet",
  "key": "1|PR|2",
  "children": [{
    "value": "1|PR|2 | C1",
    "title": "Södra Stugområdet",
    "children": undefined
  }, {
    "value": "1|PR|2 | C2",
    "title": "Östra Stugområdet",
    "children": undefined
  }
  ]
}
]

export interface IGeoFilterItem {
  value: string,
  title: string,
  children: Array<IGeoFilterItem> | undefined
}

const GeoFilterTree = () => {

  function renderTreeNodes(data: Array<IGeoFilterItem> | undefined) {
    if (data !== undefined) {
      data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.title} key={item.value} dataRef={item}>
              {renderTreeNodes(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.value} title={item.title} />;
      });
    }
    else {
      return <TreeNode />;
    }
  }

  return (<Tree checkable>
    {/* <TreeNode key="a" title="Test" />  */}
    {renderTreeNodes(geoData)}

  </Tree>
  );
}

export default GeoFilterTree

Answer 1

问题是我错过了将return放在data.map前面

因此渲染功能应如下所示：

function renderTreeNodes(data: Array<IGeoFilterItem> | undefined) {
if (data !== undefined) {
  return data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.value} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.value} title={item.title} />;
  });
}
else {
  return <TreeNode />;
}

}

使用Typescript渲染React antd树不返回任何数据

1 个答案: