У меня есть массив, который выглядит примерно так:
const hierarchy = [
{
hierarchyId: 1,
hierarchyName: 'John'
children: [
{
hierarchyId: 2,
hierarchyName: 'Mary',
children: []
},
{
hierarchyId: 3,
hierarchyName: 'Jane',
children: [
{
hierarchyId: 4,
hierarchyName: 'Joan',
children: []
},
{
hierarchyId: 5,
hierarchyName: 'Jim',
children: [
{
hierarchyId: 6,
hierarchyName: 'Mike',
children: []
}
]
}
]
}
]
}
]
И я хочу представить это в Дереве Дизайна Муравьев. Но я хочу иметь возможность добавлять кнопки и, возможно, еще один столбец в TreeNode в дереве.
import React from 'react'
import { Tree } from 'antd'
const { TreeNode } = Tree
const TreeComponent = ({ hierarchy }) => {
return (
<Tree>
{hierarchy.map(res => {
return (
<TreeNode
key={res.hierarchyId}
title={(
<div>
<span>{res.hierarchyName}</span>
<span>Another Column</span>
<button>Click here</button>
</div>
)}>
{res.children.map(r => {
<TreeNode
key={res.hierarchyId}
title={(
<div>
<span>{res.hierarchyName}</span>
<span>Another Column</span>
<button>Click here</button>
</div>
)} />
})}
</TreeNode>
)
}}
</Tree>
)
}
export default TreeComponent
Теперь, очевидно, что вышеприведенное будет показывать только 2 уровня в глубине дерева, мне интересно, были ли скажем, 10 уровней (или любое количество на самом деле), как бы я динамически отображал каждый уровень в дереве, не зная, как глубоко он идет, и все еще был бы в состоянии добавить кнопку и другой столбец в TreeNode?
Любая помощь очень оценил, спасибо!