Javascript 如何使用React组件处理递归数组映射？

下面是一个名为

index（）

的示例函数，我使用它从标记文件返回标题索引。正如您所看到的，只有3个级别的标题，它很快就会失控

我尝试了各种递归思想，但最终在

createreact-app

中编译失败

有没有人能提供一些指导来清理这个问题，甚至可以允许无限/更高级别的嵌套

数组存储在

this.state.index

中，类似于下面的数组

[
  {
    label: 'Header title',
    children: [
      {
        label: 'Sub-header title'
        children: [...]
      }
    ]
  }
]

然后在下面的函数中使用该数据生成

ul

索引

  index() {
    if ( this.state.index === undefined || !this.state.index.length )
      return;
    return (
      <ul className="docs--index">
        {
          this.state.index.map((elm,i=0) => {
            let key = i++;
            let anchor = '#'+elm.label.split(' ').join('_') + '--' + key;
            return (
              <li key={key}>
                <label><AnchorScroll href={anchor}>{elm.label}</AnchorScroll></label>
                <ul>
                  {
                    elm.children.map((child,k=0) => {
                      let key = i+'-'+k++;
                      let anchor = '#'+child.label.split(' ').join('_') + '--' + key;
                      return (
                        <li key={key}>
                          <label><AnchorScroll href={anchor}>{child.label}</AnchorScroll></label>
                            <ul>
                              {
                                child.children.map((grandchild,j=0) => {
                                  let key = i+'-'+k+'-'+j++;
                                  let anchor = '#'+grandchild.label.split(' ').join('_') + '--' + key;
                                  return (
                                    <li key={key}>
                                      <label><AnchorScroll href={anchor}>{grandchild.label}</AnchorScroll></label>
                                    </li>
                                  );
                                })
                              }
                            </ul>
                        </li>
                      );
                    })
                  }
                </ul>
              </li>
            );
          })
        }
      </ul>
    );
  }

index（）{
if（this.state.index==未定义的| |！this.state.index.length）
返回；
返回(

{
this.state.index.map（（elm，i=0）=>{
设key=i++；
让anchor='#'+elm.label.split（''）.join（''）+'-'+key；
返回(

{elm.label}

{
elm.children.map（（child，k=0）=>{
设key=i+'-'+k++；
让anchor='#'+child.label.split（''）.join（''）+'-'+key；
返回(

{child.label}

{
child.children.map（（孙子，j=0）=>{
设key=i+'-'+k+'-'+j++；
让anchor='#'+grant.label.split（''）.join（''）+'-'+key；
返回(

{grander.label}

);
})
}


);
})
}


);
})
}

);
}

---

就像我说的，这真是一团糟！一般来说，我对反应和编码是新手，如果这是一个愚蠢的问题，我很抱歉。

我没有好的测试数据，但请尝试一下：

index() {
    if ( this.state.index === undefined || !this.state.index.length ) {
        return null;
    }

    const sections = this.state.index.map(this.handleMap);

    return (
        <ul>
            {sections}
        </ul>
    )

}

handleMap(elm, i) {
    const anchor = '#'+elm.label.split(' ').join('_') + '--' + i;
    return (
        <li key={i}>
            <label><AnchorScroll href={anchor}>{elm.label}</AnchorScroll></label>
            <ul>
                {
                    elm.children.map(this.handleMapChildren)
                }
            </ul>
        </li>
    );
}

handleMapChildren(child, i) {
    let anchor = '#'+child.label.split(' ').join('_') + '--' + i;
    return (
        <li key={i}>
            <label><AnchorScroll href={anchor}>{child.label}</AnchorScroll></label>
            <ul>
                {
                    child.children.map(this.handleMapChildren)
                }
            </ul>
        </li>
    );
}

index（）{
if（this.state.index==未定义的| |！this.state.index.length）{
返回null；
}
const sections=this.state.index.map（this.handleMap）；
返回(

{sections}

)
}
handleMap（elm，i）{
常量anchor='#'+elm.label.split（''）.join（''）+'-'+i；
返回(

{elm.label}

{
elm.children.map（此为handleMapChildren）
}


);
}
手把手儿童（儿童，i）{
让anchor='#'+child.label.split（''）.join（''）+'-'+i；
返回(

{child.label}

{
child.children.map（this.handleMapChildren）
}


);
}

似乎需要对组件进行递归调用。
例如，组件

项

将根据一个条件（存在

子项

数组）自身呈现它

运行示例：

const数据=[
{
标签：'标题'，
儿童：[
{
标签：“子标题”，
儿童：[
{标签：'3级#1'}，
{
标签：“第三级#2”，
儿童：[
{标签：'级别4'}
]
}
]
}
]
}
]
类项扩展了React.Component{
render（）{
const{label，children}=this.props；
返回(
{label}
{children&&children.map（（项，索引）=>）}
)
}
}
常量应用=（）=>(
{data.map（（项，索引）=>）}
);
ReactDOM.render（，document.getElementById（'root'））

看一看，您好，上面相同的示例是否可以下一页，如HeaderTitle是一页，而单击HeaderTitle它将导航到Header#2页，单击此按钮它将导航到下一页。。。在单个页面中，我们只需要传递不同的参数。有可能这样做吗？。如果你知道，你能帮我吗？@user抱歉，我不明白这个问题。我相信这应该作为一个单独的问题与代码示例等问。请检查这里我张贴了我的问题