Question

我想要的结果就是这个

  <ul id="toc">
    <li><Link to="/page1">Page 1</Link></li>
    <li><Link to="/page1">Page 2</Link></li>
    <li><Link to="/page1">Page 3</Link></li>
    <li><Link to="/page1">Page 4</Link></li>
    <li><Link to="/page1">Page 5</Link></li>
  </ul>

它很多，所以我想循环并建立链接

const pages = [
  { name: "Page 1", url:"/page1"},
  { name: "Page 2", url:"/page2"},
  { name: "Page 3", url:"/page3"},
  { name: "Page 4", url:"/page4"}
]

现在在我的JSX中

  <ul id="toc">
      {Object.keys(pages).map((name, url) => {
        <li><Link to="{url}">{name}</Link></li>
      })}

  </ul>

然而，我没有看到任何东西，我没有看到循环？这是在JSX中实现它的方法

对不起外行人员q我还是新手反应/ js

Answer 1

加起来的四件小事：

Object.keys(pages).map((name, url) => {
  <li><Link to="{url}">{name}</Link></li>
})

由于pages已经是数组，因此不需要Object.keys。
要获得name和url，您可以使用解构。它们没有作为函数参数传递。
传递给.map的函数需要以某种方式返回值。
您可以忽略{url}。

所有这些都在一起作为

pages.map(({name, url}) => {
  return <li><Link to={url}>{name}</Link></li>
})

或

pages.map(({name, url}) => 
  <li><Link to={url}>{name}</Link></li>
)

Answer 2

美好的一天，代码就是这样：

           pages.map((page,index)=> {
                  <li><Link to={page.url}>{page.name}<Link></li>
           })

一旦映射，第一个元素就是数组上每个变量的名称。

想象：

         foreach (var page in pages)

其中：pages是页面列表（数组）

如何循环创建一个包含链接的列表？

2 个答案: