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

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的示例，尝试一下，也尝试一下：&nbsp;<ul><ListItem key={id} value={name} /></ul>