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

您只需在create or replace Function add_group_days(Start_Date Date, nrDays Varchar2, dayType Varchar2) Return Date As --Returns a date as a result of adding multiple numbers of working and calendar days. Syntax to be used: ADD_GROUP_DAYS(DATE,'NR|NR...','WD or CD|WD or CD') --Example syntax: ADD_GROUP_DAYS(SYSDATE,'1|2|2|3','WD|CD|CD|WD') --If number of arguments for the nrDays and dayType (number of values between '|') are not the same then it will return null --Nested function: ADD_WORKING_DAYS() End_Date Date; Begin If Start_Date is null or nrDays is null or dayType is null Then Return null; Elsif regexp_count(nrDays,'[^|]+')<>regexp_count(dayType,'[^|]+') Then Return null; Else End_Date := Trunc(Start_Date); For i in 1..regexp_count(nrDays,'[^|]+') Loop If regexp_substr(dayType,'[^|]+',1,i) not in ('WD','CD') Then Return null; Elsif regexp_substr(dayType,'[^|]+',1,i) in ('CD') Then End_Date := End_Date + To_Number(regexp_substr(nrDays,'[^|]+',1,i)); Elsif regexp_substr(dayType,'[^|]+',1,i) in ('WD') Then End_Date := add_working_days(End_Date,To_Number(regexp_substr(nrDays,'[^|]+',1,i))); End If; End Loop; End If; Return End_Date; End add_group_days;组件内添加一个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')
);

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>

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

3 个答案: