将较长的无序列表分成多个列表

Question

我目前<ul>使用以下代码生成了一个：function ListItem(props) {  return <li>{props.value}</li>;}function ListLinks() {  const listItems = footerLinks.map(section => {    return section.data.map(({id, name, to}) => {      return <ListItem key={id} value={name} />    })  });  return listItems;}return (  <ul>    <ListLinks />  </ul>)/* Output<ul>  <li>blah</li>  <li>blah</li>  …</ul>*/但是，我想将拆分<ul>成多个<ul>。在外map在ListLinks()的，我知道，一个新的部分开始。但是，我不确定如何分解JSX以创建n基于节数的列表的方式。最终，我尝试创建：<ul>  <li>list 1 title</li>  <li>list 1 item</li>  …</ul><ul>  <li>list 2 title</li>  <li>list 2 item</li>  …</ul>这是我的输入数据。const footerLinks = [{  "title": "Learn More",  "data": [{      id: 'news',      name: 'News',      to: '/news'    },    {      id: 'faq',      name: 'FAQ',      to: '/faq'    }  ]},{  "title": "Media",  "data": [{      id: 'media',      name: 'Media Kit',      to: '/media'    },    {      id: 'media_enquiries',      name: 'Media Enquiries',      to: '/media_enquiries'    }  ]}]

Answer 1

我不确定，但是尝试@ShantiswarupTunga的示例，尝试一下，也尝试一下： <ul><ListItem key={id} value={name} /></ul>