如何在反应渲染函数中创建动态 href？

我正在呈现一个帖子列表。对于每一篇文章，我想呈现一个锚标记，其中 post id 作为 href 字符串的一部分。

render: function(){
return (
<ul>
{
this.props.posts.map(function(post){
return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
})
}
</ul>
);

我如何做到这一点，使每个职位有一个 /posts/1，/posts/2等？

216401 次浏览

小开

最佳答案

使用字符串连接:

href={'/posts/' + post.id}

JSX 语法允许使用字符串或表达式 ({...})作为值。你不能两者兼顾。在表达式内部，顾名思义，您可以使用任何 JavaScript 表达式来计算值。

小开

您也可以使用 ES6反勾语法

<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>

关于 es6模板文字的更多信息

小开

你能试试这个吗？

在后期创建另一个项目，比如链接，然后在将邮寄发送到呈现函数之前将链接分配给它。

post.link = '/posts/+ id.toString();

因此，上面的呈现函数应该改为。

return <li key={post.id}><a href={post.link}>{post.title}</a></li>

小开

除了菲利克斯的回答,

href={`/posts/${posts.id}`}

也会很好。这很好，因为它是一个字符串中的所有。