javascript - 如何循环创建带有链接的列表？

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我对react/js还是个新手

Answer 1

四件小事加起来:

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

1. 由于 pages 已经是一个数组，因此不需要 Object.keys。
2. 要获取name和url，您可以使用解构。它们不会作为函数参数传递。
3. 传递给 .map 的函数需要以某种方式返回一个值。
4. 您可以省略 {url} 两边的引号。

所有这些组合在一起就是

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

或

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