将一个长的无序列表拆分为多个列表

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> 。 在ListLinks()的外部map中，我知道新的部分正在开始。 但是，我不确定如何根据节的数量以创建n列表的方式分解JSX 。

最终，我正在尝试创建：

<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

您只需在ListLinks组件中再添加一个map调用ListLinks为每个部分创建ul和h4标题。

 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"}]}] function ListItem(props) { return <li>{props.value}</li>; } function ListLinks(props) { const listItems = props.data.map(section => ( <div key={section.title}> <h4>{section.title}</h4> <ul>{section.data.map(item => ( <ListItem key={item.id} value={item.name} /> ))}</ul> </div> )); return listItems; } ReactDOM.render( <ListLinks data={footerLinks} />, document.getElementById('container') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"></div>

Answer 2

你可以试试

function ListLinks() {
   const listItems =footerLinks.map(section => {
   let x = section.data.map(({id, name, to}) => {
   return <ListItem key={id} value={name} />
   })
   return (<ul>{x}</ul>)
});

return listItems;
}

我在https://codesandbox.io/s/ko361j7wkv添加了代码

Answer 3

我不太确定，但试试@ShantiswarupTunga 的例子，试试看，也试试这个： <ul><ListItem key={id} value={name} /></ul>