I've tried to convert the Tree example from antd to use TypeScript but the child-renderfunction dosen't return anything. The commented row render when i remove the comment.
The RenderTreeNodes function is running for each element in the array. I have also tried to use an const - arrow function.
How do i do this with typescript?
Simplified code
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
The problem was that i missed to put return in front of data.map
So the render function should look like this:
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 />;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.