javascript - 如何从嵌套数组动态和递归地呈现列表项？

Question

给定输出，我想<li>动态列出

results = [
  {
    name: 'a1',
    results: []
  },
  {
    name: 'a2',
    results: [
      {
        name: 'b1',
        results: []
      },
      {
        name: 'b2',
        results: [
          {
            name: 'c1',
          }
        ]
      }
    ]
  },
  {
    name: 'a3',
  }
]

这是预期的输出

<li>a1</li>
<li>a2</li>
<li>b1</li>
<li>b2</li>
<li>c1</li>
<li>a3</li>

我的伪代码，但我认为这甚至不接近......我认为我需要“递归”解决方案来解决这个问题

input.map((r) => {
  if(r) {
    return renderResult(r);
  } <<< This is not a recursive way...
  return renderResult(r.results.?);
});

如何动态和递归地列出它？

标签： javascripthtmlreactjs

Answer 1

您的解决方案几乎就是这个

function generate(arr) {
  const items = [];
  arr.forEach( i => {
    items.push(i.name); //Or whatever you want
  });
  return items;
}

只需引入递归

function generate(arr) {
  const items = [];
  arr.forEach( i => {
    items.push(i.name);

    if( !!i.results ){
      const subs = generate(i.results);
      subs.forEach( s => items.push(s));
    }
  });
  return items;
}