Arrays 基于嵌套数组渲染嵌套元素

我得到了这个嵌套数组，我需要遍历它来创建嵌套容器

lvl4

应该进入

lvl3

，

lvl3

到

lvl2

和

lvl2

内部

lvl1

const elements = [ 
  { name: 'a-lvl1', innerEl: [ 
    { name: 'a1-lvl2', innerEl: [
      { name: 'a1-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] },
      { name: 'a2-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
    { name: 'a2-lvl2', innerEl: [
      { name: 'a-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
    { name: 'a3-lvl2', innerEl: [
      { name: 'a-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
  ] },
  { name: 'b-lvl1', innerEl: [ { }] },
  { name: 'c-lvl1', innerEl: [ { }] }
]

这是当前的脚本，它正在工作，但我正在寻找一个更简单的解决方案

let renderElements = null;

if( elements !== undefined || elements.length != 0 ) {
  renderElements = elements.map( lvl1 => {   
    let lvl2Blocks = null;

    if( lvl1.innerEl !== undefined || lvl1.innerEl.length != 0) {
      lvl2Blocks = lvl1.innerEl.map( lvl2 => {
        let lvl3Blocks = null;

        if( lvl2.innerEl !== undefined || lvl2.innerEl.length != 0) {
          lvl3Blocks = lvl2.innerEl.map( lvl3 => {
            let lvl4Blocks = null;

            lvl4Blocks = lvl3.innerEl.map( lvl4 => {
              return (
                <div name={lvl4.name} selected={null} > 
                  { lvl4.innerEl !== undefined && lvl4Blocks }
                </div>
              )
            });

            return (
              <div name={lvl3.name} selected={null} > 
                { lvl3.innerEl !== undefined && lvl4Blocks }
              </div>
            )
          });
        }

        return (
          <div name={lvl2.name} selected={null} > 
            { lvl2.innerEl !== undefined && lvl3Blocks }
          </div>
        )
      });
    }

    return (
      <div name={lvl1.name} selected={null} > 
        { lvl1.innerEl !== undefined && lvl2Blocks }
      </div>
    )
  });
}

让renderements=null；
if（elements！==未定义的| | elements.length！=0）{
renderElements=elements.map（lvl1=>{
让lvl2Blocks=null；
if（lvl1.innerEl！==未定义的| | lvl1.innerEl.length！=0）{
lvl2Blocks=lvl1.innerEl.map（lvl2=>{
设lvl3Blocks=null；
if（lvl2.innerEl！==未定义的| | lvl2.innerEl.length！=0）{
lvl3Blocks=lvl2.innerEl.map（lvl3=>{
设lvl4Blocks=null；
lvl4Blocks=lvl3.innerEl.map（lvl4=>{
返回(
{lvl4.innerEl！==未定义和&lvl4Blocks}
)
});
返回(
{lvl3.innerEl！==未定义和&lvl4Blocks}
)
});
}
返回(
{lvl2.innerEl！==未定义和&lvl3Blocks}
)
});
}
返回(
{lvl1.innerEl！==未定义和&lvl2block}
)
});
}

有什么想法吗？谢谢

如前所示，我在

同样，这里的技巧是使用递归。因此，使用这个简单的组件，您将能够渲染到所需的深度

function ListItem({ item }) {
  let children = null;
  if (item.innerEl && item.innerEl.length) {
    children = (
      <ul>
        {item.innerEl.map(i => (
          <ListItem item={i} key={i.id} />
        ))}
      </ul>
    );
  }

  return (
    <li>
      {item.name}
      {children}
    </li>
  );
}

这应该是这样的，或者您需要修改

ListItem

组件来检查第一个项目是否为空对象

{ name: 'b-lvl1', innerEl: [] },

---

令人惊叹的谢谢我在上一个线程中对您的解决方案进行了优化。顺便说一下，这些数组不是空的。只是没有时间填写。：）@谢谢。好的。那么请忽略我关于它的陈述；）您知道在执行递归时有什么方法可以提高性能吗？为了提高性能，如果不想更新shouldComponentUpdate，则需要在shouldComponentUpdate中返回false。PureComponent本身确实实现了shouldComponentUpdate函数，在该函数中，它对组件的属性和状态进行阴影比较。

{ name: 'b-lvl1', innerEl: [] },