递归结构的对象数组:ReactJS

Question

我试图渲染数组作为一个嵌套的树，可以上升到n个级别。基本上，我有一个描述父节点和子节点的JSX。根据节点是父节点还是子节点，我需要通过附加classname来呈现树。

JSX的父元素看起来像:

<div className="level-0 group">
<div className="details-holder">
<span className="item-text">{name}</span>
</div>
</div>

JSX的孩子看起来像:

<div className="level-1 leaf">
<span className="line" />
<div className="details-holder">
<span className="item-text">{name}</span>
</div>
</div>
<div className="level-2 leaf">
<span className="line" />
<div className="details-holder">
<span className="item-text">{name}</span>
</div>
</div>

这些JSX需要基于对象数组动态呈现，并具有以下结构

[{
"name": "abc",
"className": "level-0 group",
"children": [{
"name": "abc.xyz",
"className": "level-1 leaf",
"children": [{
"className": "level-2 leaf",
"name": "abc.xyz.pqr",
"children": []
}]
}]
}]

所以理想情况下，父母应该有level-0 group类，子女level-1 leaf类，孙子level-2 leaf类等等。

我尝试的代码如下，但我如何动态地做到

return(
{ data.map(item => {
<>
<div className=`${item.className}`>
<div className="details-holder">
<span className="item-text">{item.name}</span>
</div>
</div>

<div className={`${item[0].children[0].className`}>
<span className="line" />
<div className="details-holder">
<span className="item-text">{item[0].children[0].name}</span>
</div>
</div>
<div className={`${item[0].children[1].className`}>
<span className="line" />
<div className="details-holder">
<span className="item-text">{item[0].children[1].name}</span>
</div>
</div>
</>
}
}
)

谢谢你的帮助。

Answer 1

如果它适合你，请检查一下。它以模块化的形式帮助你分别更新父和子HTML片段。

const Parent = (item) => (
<div className={`${item.className}`}>
<div className="details-holder">
<span className="item-text">{item.name}</span>
</div>
</div>
);
const Child = (item) => (
<div className={`${item.className}`}>
<span className="line" />
<div className="details-holder">
<span className="item-text">{item.name}</span>
</div>
{item.children.map((ch) => (
<Child {...ch} />
))}
</div>
);
export default function App() {
return (
<div className="App">
{data.map((item) => (
<>
<Parent {...item} />
{item.children.map((ch) => (
<Child {...ch} />
))}
</>
))}
</div>
);
}

Answer 2

如果在组件内部实现递归，这实际上非常简单。只需将子组件作为数据传递给调用自身的相同组件。

const Tree = (props) => {
return <>
{
props.data.map((item) => {
return <div className = {item.className} > {
(props.level !== 0) && < span className = "line" />
} <div className = "details-holder" >
<span className = "item-text" > {name} </span> </div> {
props.data.children.map(() => <Tree data={item.children} level={props.level + 1} > )
} </div>
})

}
</>
}

<Tree data={data} level={0} />