JSX内部的循环

Question

我有一个类似的对象：

{
id: number,
kids: [{
id: number,
kids: [{
id: number,
kids: []
}]
}]
}

所以它有财产孩子，这是一系列的孩子，每个孩子可能都有自己的孩子。我需要在树视图列表中呈现原始对象，如下所示：

<ul>
{object.map(item => (
<li>
<p>{item.value}</p>
{item.kids ?
{item.kids.map(item => (
<ul>
<li>
<p>{item.value}</p>
</li>
</ul>
))}
: null
}
</li>
))}
</ul>

因此，如果item.childs不是空数组，则每个child项都将是一个<li></li>元素，其中包含<ul></ul>。我可以继续这样下去，但这很混乱，更重要的是，我不知道孩子们的财产什么时候会变成一个空数组。所以我需要以某种方式循环原始对象和它的属性，并做一些类似的事情

while (kid.kids) {
return {kid.kids.map(kid => (
<li>
<p>{kid.value}</p>
<ul>
kid.kids.map(kid => (
etc
))
</ul>
</li>
}))
}

但我无法理解这样循环的更好方法。

Answer 1

这可能是用递归解决的最佳方法。

const Kids = ({id, kids}) => {
return {
<li key={id}>
<p>{id}</p>
{kids 
? (<ul>{kids.map((kid) => <Kids id={kid.id} kids={kid.kids} />)}</ul>)
: null; 
}
</li>
}
};