[英]How can I loop through to make a list with a Link?
The result I want is this 我想要的结果是这样
<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>
its a lot so I want to loop through and make the links 它很多,所以我想遍历并建立链接
const pages = [
{ name: "Page 1", url:"/page1"},
{ name: "Page 2", url:"/page2"},
{ name: "Page 3", url:"/page3"},
{ name: "Page 4", url:"/page4"}
]
now in my JSX 现在在我的JSX中
<ul id="toc">
{Object.keys(pages).map((name, url) => {
<li><Link to="{url}">{name}</Link></li>
})}
</ul>
However I am not seeing anything, I am not seeing the loop? 但是我什么也没看到,没有看到循环吗? is this the way to do it in JSX
这是在JSX中做到的方式
Sorry for the layman q I am still new to react/js 对不起,外行q我仍然是React / JS的新手
Four little things that add up: 总共四件事:
Object.keys(pages).map((name, url) => {
<li><Link to="{url}">{name}</Link></li>
})
pages
is already an array, Object.keys
is not necessary. pages
已经是数组,因此不需要Object.keys
。 name
and url
you can use destructuring. name
和url
您可以使用解构。 They aren't passed as the function params. .map
needs to return a value somehow. .map
的函数需要以某种方式返回值。 {url}
. {url}
周围的引号。 That all comes together as 一切都在一起
pages.map(({name, url}) => {
return <li><Link to={url}>{name}</Link></li>
})
or 要么
pages.map(({name, url}) =>
<li><Link to={url}>{name}</Link></li>
)
Good Day , the code for that is this : 美好的一天,代码是这样的:
pages.map((page,index)=> {
<li><Link to={page.url}>{page.name}<Link></li>
})
once you map , the first element would be the name of each variable on the array. 映射后,第一个元素将是数组上每个变量的名称。
imagine : 想象:
foreach (var page in pages)
wherein: pages is the list of page ( an array ) 其中:pages是页面列表(数组)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.