Tree only accept TreeNode as children. Ant Design Tree组件如何自定义子组件

最近在用ant Design框架做项目，业务需求做一个树型的图例，既要满足树形结构，同时需要修改叶子节点，展示不同的图例的颜色，效果如图

图例

最初的写法是使用原生,可以实现

代码

基本实现，但问题树形结构是动态的，这里并不知道多少层级，遂这里只能自定义组件递归渲染所有子节点，so

自定义组件

引入

这里组件调用自身，可实现递归效果。

一切都很顺利，但是，第一步就报错了，也就是标题中看到的

报错

意思是说，Tree只能允许自家的TreeNode作为子节点，咱们写的CTreeNode不是亲生的

---

现在干货来了， 既然写了这边文章，证明问题会得到解决，找到Tree是如何判断下面的子组件是否是亲生的， 以及，如何让自定义组件变成亲生的

从报错信息中查找答案，打开控制台

错误1

在TreeNode的getNodeChildren() 方法抛出异常

报错2

可以看出_getNodeChildren() 方法获取为空，导致等式不成立抛出异常，那等式为何不成立呢

报错3

可以看到，这里children为数组,同时看到了熟悉的c-tree-node。

如果isTreeNode()返回true， filter过滤后，返回值应该不为空，显然，这里的isTreeNode()返回false，继续看 isTreeNode() 方法，这里继续调用了 getSlotOptions(node) 方法，从方法的返回值判断isTreeNode属性，很显然，这里的isTreeNode属性也肯定不为true。那现在看看 getSlotOptions(node) 返回的是什么吧

报错4

错误5

看到这里，我虎躯一震，这不就是我写的vue吗

代码

说了这么多，大家应该都知道该怎么做了

答案

完结撒花，至于为什么，我也不知道，毕竟我只是个java工程师