创建具有递归函数嵌套元素

Question

这是对象的接口，和目标数据是该对象的阵列，使得它

looks like; 
export interface IMenuModel { 
    Id: number 
    itemName: string; 
    parentId?: number; 
    childItems: IMenuModel[]; 
} 

样本内容例的图。

[ {itemName:"League",.. childItems: [{itemName:"Fixture",.. childitems:[...]]}] } ] 

这是我想要创建的示例列表;

<li className="dropdown"> 
    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">League<span className="caret" /></a> 
    <ul className="dropdown-menu" role="menu"> 
     <li><a href="#">Fixture</a> 
      <ul className="dropdown-menu" role="menu"> 
       <li> 
        <a href="#">item name</a> 
       </li> 
       <li> 
        <a href="#">item name</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 

这是我试图做的，但只有一个深;

listLoop(items:IMenuModel[]):JSX.Element[] { 
    var menuJsx:JSX.Element[] = items.map((item)=>{ 
     return (<li key={item.Id} className="dropdown"> 
     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> {item.itemName}<span className="caret" /></a> 
     </li>); 
    }) 
    return menuJsx; 
    } 

我该如何创建一个递归函数来实现这个？

Answer 1

添加一个递归调用listLoop如果item.childItems不为空：

listLoop(items:IMenuModel[]):JSX.Element[] { 
    var menuJsx:JSX.Element[] = items.map((item)=>{ 
     return (<li key={item.Id} className="dropdown"> 
     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> {item.itemName}<span className="caret" /></a> 
      {items.childItems && items.childItems.length && 
       <ul className="dropdown-menu" role="menu"> 
       {this.listLoop(items.childItems)} 
       </ul> 
      } 
     </li>); 
    }) 
    return menuJsx; 
} 

Answer 2

写这样的：

_createList(item){ 
     return item.map((el,i)=>{ 
      return <div key={i}> 
        {el.name} 
        {el.child.length ? this._createList(el.child) : null} 
       </div> 
     }) 
    } 

    render() { 
    return (
     <div > 
     {this._createList(item)} 
     </div> 
    ) 
    } 

检查工作jsfiddle：https://jsfiddle.net/mayankshukla5031/wxrc24o1/

var item=[ 
 
    { 
 
     \t name: '1', 
 
     \t child: [] 
 
    }, 
 
    { 
 
    \t name: '2', 
 
    \t child: [ 
 
    \t \t { 
 
    \t \t \t name: '2.1', 
 
    \t \t \t child: [ 
 
    \t \t \t \t { 
 
    \t \t \t \t \t name: '2.1.1', 
 
    \t \t \t \t \t child:[ 
 
    \t \t \t \t \t \t { 
 
    \t \t \t \t \t \t \t name: '2.1.1.1', 
 
    \t \t \t \t \t \t \t child: [], 
 
    \t \t \t \t \t \t } 
 
    \t \t \t \t \t ] 
 
    \t \t \t \t } 
 
    \t \t \t ] 
 
    \t \t }, 
 
    \t \t { 
 
    \t \t \t name: '2.2', 
 
    \t \t \t child: [] 
 
    \t \t } 
 
    \t ] 
 
    } 
 
]; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    } 
 
    
 
    _createList(item){ 
 
     return item.map((el,i)=>{ 
 
      return <div key={i}> 
 
        {el.name} 
 
        {el.child.length ? this._createList(el.child) : null} 
 
       </div> 
 
     }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div > 
 
     {this._createList(item)} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"/>