Ant-design: Dynamic Tree with antd Tree & TreeNode

Created on 22 Jan 2017 · 3Comments · Source: ant-design/ant-design

const Leaf = ({ id }) => <Tree.TreeNode title={doing something dynamic here} />

...
<Tree>
    { instances.map(instance => <Leaf key={instance} id={instance} />) }
</Tree>

It looks like the ant tree is not dynamic/component oriented. There's no way to return a treenode without running into errors like TypeError: props.filterTreeNode is not a function.

I don't know how to solve this. Each leaf component must be reactive, there is no way that i could get all the nested data beforehand, unless i render the entire tree for each change, which isn't possible due to performance concerns.

Source

drcmda

Most helpful comment

@yesmeck @benjycui @warmhug
Is there any chance that the TreeNode will become a standalone and composable class? As Tree and TreeNode are seperate classes in rc-tree this should be possible or am i wrong?

I'd really appreciate the TreeNode to be a standalone class as it would offer lots of possibilities and would feel more "reactish".

KaiVolland on 13 Sep 2017

👍15

All 3 comments

Hello @drcmda, TreeNode can not be composed with the current architecture.

Change your code to:

<Tree>
    { instances.map(instance => 
      <Tree.TreeNode key={instance} title={doing something dynamic here} />) 
    }
</Tree>

yesmeck on 3 Feb 2017

👎11

@yesmeck I'm afraid that isn't possible, because it would mean i need to have the nested structure beforehand, but only nested components know their their subcomponents (they're tied to state). I ended up writing my own tree, though. I have my hopes up this will be addressed one day. :)

drcmda on 17 Feb 2017

I'd really appreciate the TreeNode to be a standalone class as it would offer lots of possibilities and would feel more "reactish".

KaiVolland on 13 Sep 2017

👍15

Was this page helpful?

0 / 5 - 0 ratings