實現react元件的遞迴呼叫
導語: 專案中有側邊欄的層級選單或者需要根據介面生成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>