javascript - 在反应中输出嵌套列表

Question

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

小部件数组

{
  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>

标签： javascriptreactjs

Answer 1

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