實現react元件的遞迴呼叫

摘要： 導語： 專案中有側邊欄的層級選單或者需要根據介面生成DOM樹等操作時，如何實現元件的遞迴呼叫呢？ 專案中有側邊欄的層級選單或者需要根據介面生成DOM樹等操作時，這裡就需要用到了元件的遞迴呼叫。 在本篇文章裡，我們使用React來簡單實現下元件的遞迴。在React可以通過props和ch...

導語： 專案中有側邊欄的層級選單或者需要根據介面生成DOM樹等操作時，如何實現元件的遞迴呼叫呢？

專案中有側邊欄的層級選單或者需要根據介面生成DOM樹等操作時，這裡就需要用到了元件的遞迴呼叫。

在本篇文章裡，我們使用React來簡單實現下元件的遞迴。在React可以通過props和children來向子元件傳遞資訊，不過在這裡大致的思路都是一樣的。我們先定義一下要渲染的json結構：

list = [
{
name: '1',
children: [
{
name: '1-1'
},
{
name: '1-2',
children: [
{
name: '1-2-1'
}
]
},
{
name: '1-3'
}
]
},
{
name: '2',
children: [
{
name: '2-1'
}
]
}
]

我們的Item元件可以這樣實現：

render() {
const list: any = this.props.children || [];
return (
<div className="item">
{
list.map((item: ItemData, index: number) => {
return <React.Fragment key={index}>
<h3>{item.name}</h3>
{
// 當該節點還有children時，則遞迴呼叫本身
item.children && item.children.length ?
<Item>{item.children}</Item> : null
}
</React.Fragment>
})
}
</div>
)
}

最後呼叫這個Item元件：

<Item>{this.list}</Item>