React中将单个<ul>按section拆分为多个无序列表的实现

没问题，我来帮你搞定这个拆分列表的需求！你只需要调整ListLinks函数的逻辑，让它直接遍历footerLinks数组，为每个section生成独立的<ul>就可以了。每个列表里先放section的标题作为列表项，再遍历该section的data生成对应的链接项。

这里是修改后的完整代码：

function ListItem(props) {
  return <li>{props.value}</li>;
}

function ListLinks() {
  // 遍历每个section，生成对应的独立列表
  return footerLinks.map((section, idx) => (
    <ul key={`footer-section-${idx}`}>
      {/* 先添加当前section的标题作为列表项 */}
      <li key="section-title">{section.title}</li>
      {/* 再遍历当前section的data生成子列表项 */}
      {section.data.map(({ id, name }) => (
        <ListItem key={id} value={name} />
      ))}
    </ul>
  ));
}

// 现在渲染的时候直接用ListLinks就行，不用在外层再包<ul>了
return <ListLinks />;

几个关键细节： #

• 我们不再把所有列表项合并成一个大数组，而是给每个section单独创建一个<ul>，这样就能得到你想要的多个独立列表结构。
• 给每个<ul>设置了唯一的key（这里用section的索引加上前缀，避免和内部列表项的key冲突），React依赖key来高效更新DOM，这个细节不能忘。
• 每个section里先渲染标题<li>，再渲染该section下的所有数据项，完全匹配你期望的输出结构。

最终生成的HTML结构会是这样： #

<ul>
  <li>Learn More</li>
  <li>News</li>
  <li>FAQ</li>
</ul>
<ul>
  <li>Media</li>
  <li>Media Kit</li>
  <li>Media Enquiries</li>
</ul>

内容的提问来源于stack exchange，提问作者Andy Hoffman