Reactjs 使用递归函数创建嵌套元素

这是对象的接口，目标数据是该对象的数组，所以

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;
  }

listLoop（items:IMenuModel[]）：JSX.Element[]{
var menuJsx:JSX.Element[]=items.map（（item）=>{
return（

）；
})
返回menuJsx；
}

---

如何创建递归函数来实现这一点

如果

项.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;
}

listLoop（items:IMenuModel[]）：JSX.Element[]{
var menuJsx:JSX.Element[]=items.map（（item）=>{
return（

{items.childItems&&items.childItems.length&&

{this.listLoop（items.childItems）}

}
）；
})
返回menuJsx；
}
这样写：

 _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>
    )
  }