在react中输出一个嵌套列表

如何解决在react中输出一个嵌套列表

这不应该那么困难，但是我的大脑已经厌倦了试图弄清楚这一点。我似乎无法弄清楚如何遍历列表并输出ul列表。我有两个不同的数组对象，一个包含父节点，第二个包含子节点。父节点具有子菜单键：true | false，这取决于它们是否有子节点。这是我到目前为止所做的：

widgetArray

{
  label:string,documentUrl:string,submenu:boolean
}

widgetArray.map((widget:any,index:number) => {
  if (widget.submenu) {
    return subDocumentMenu.map((document:any) => {
      if (widget.label === document.parent) {
        return (
            <li key={index}>{widget.label}
              <ul>
                <li key={index}><button onClick={() => toggleDocumentOverlay(document.dataUrl,document.label)} className={`${widget.label === widgetName ? 'active' : ''}`}>{document.label}</button></li>
              </ul>
            </li>
          )
      }
    });
  } else {
    return <li key={index}><button onClick={() => toggleDocumentOverlay(widget.dataUrl,widget.label)} className={`${widget.label === widgetName ? 'active' : ''}`}>{widget.label}</button></li>
  }
});

我意识到父节点将被输出两次，但是我对如何进行分解感到困惑，以便父节点仅输出一次，而子节点则循环。

预期的最终结果将是：

<ul>
  <li>label</li>
  <li>label
    <ul>
      <li>label</li>
      <li>label</li>
      <li>label</li>
    </ul>
  </li>
  <li>label</li>
</ul>

解决方法

您在错误的地方返回了游览<li> </li> 。请尝试这种方式

if (widget.submenu) {
      return (
        <li key={index}>

          {widget.label}

          {subDocumentMenu.map((document) => {
            if (widget.label === document.parent) {
              return <li key={index}><button onClick={() => toggleDocumentOverlay(document.dataUrl,document.label)} className={`${widget.label === widgetName ? 'active' : ''}`}>{document.label}</button></li>
            }
           })
          }
        
        </li>
   );
}