使用 Typescript 渲染 react antd 树不返回任何数据答案

【问题标题】：Render react antd tree with Typescript doesn't return any data使用 Typescript 渲染 react antd 树不返回任何数据
【发布时间】：2019-11-19 13:10:09
【问题描述】：

我尝试将 Tree 示例从 antd 转换为使用 TypeScript，但子渲染函数不返回任何内容。当我删除评论时，评论的行呈现。

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

【问题讨论】：

标签： reactjs typescript antd

【解决方案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 />;
}

}

【讨论】：