AntD Tree 的图标和标题属性需要传递一个字符串或者一个 React 元素,但是如果直接传递一个 React 元素,会导致渲染错误。解决办法是将这个元素包装在一个函数内,然后传递这个函数名作为属性值。
示例代码如下:
import { Tree } from 'antd';
const { TreeNode } = Tree;
const MyIcon = () => (
�
);
const MyTitle = ({ title }) => (
{title}
);
const treeData = [
{
title: ,
icon: ,
key: '0',
children: [
{
title: 'Child Title',
key: '0-0'
}
]
}
];
function App() {
return (
{renderTreeNodes(treeData)}
);
}
function renderTreeNodes(data) {
return data.map(item => {
if (item.children) {
return (
{renderTreeNodes(item.children)}
);
}
return ;
});
}
export default App;