JS嵌套数组遍历取值

Question

private SiteNavGroups: INavLinkGroup[] = [
    {
      name: 'Progress',
      collapseByDefault: true,
      links: [
        {
          key: 'ProgressIndicator',
          name: 'ProgressIndicator',
          url: '/ProgressIndicator',
        },
      ],
    },
    {
      name: 'Surface',
      collapseByDefault: true,
      links: [
        {
          key: 'Callout',
          name: 'Callout',
          url: '/Callout',
        },
      ],
    },
    {
      name: 'Utilities',
      collapseByDefault: true,
      links: [
        {
          key: 'Icon',
          name: 'Icon',
          url: '/Icon',
        },
      ],
    },
    {
      name: 'References',
      collapseByDefault: true,
      links: [
        {
          key: 'AutoScroll',
          name: 'AutoScroll',
          url: '/AutoScroll',
        },
      ],
    },
  ];

以上是代码的嵌套数组的数据，想实现的功能是取到每一个数组里面的links[]数组里面的name，并将其循环输入到一个ul的li中大致的意思就是
<ul><li>{name}<li/><ul>

尝试了forEach、map，没有成功。求助各位大佬

以下是我写的代码

  this.SiteNavGroups.forEach((item) => {
       let linkName = item.links.map((linkItem) => {
           return linkItem.name 
         })
       content=<ul><li>{linkName}</li></ul>
   })

Answer 1

<ul>
    {
        this.SiteNavGroups.flatMap(({ links }) => {
            return links.map(({ name }) => {
                return <li>{name}</li>;
            });
        })
    }
</ul>

Answer 2

// 个人认为生成需要的数组之后, 要怎么展示就怎么展示了
let result = SiteNavGroups.reduce((result, item) => {
    return [...result, item.links.map(v => v.name)];
}, []).flat();

Answer 3

本来以为是棵常规的树，所以准备推荐去看使用递归遍历并转换树形数据（以 TypeScript 为例），然后发现其实就是一个两层的数组，用 flatMap 就可以解决，参阅这篇：JavaScript 数据处理 - 列表篇 | 三、处理多层结构 - 展开 (flat 和 flatMap)

没注意到 React 标签，JSX 用 @柯楠 的答案就好

// 怎么从 name 创建 li 可以自由发挥
function createLi(name: string): HTMLLIElement {
    const el = document.createElement("li");
    el.innerText = name;
    return el;
}

function convert(links: INavLinkGroup[]) {
    const ul = document.createElement("ul");
    links.flatMap(({links}) => links.map(({name}) => createLi(name)))
        .forEach(li => ul.appendChild(li));
    return ul;
}

console.log(convert(SiteNavGroups));