如何在反应渲染函数中创builddynamichref？

我正在渲染一个职位列表。 对于每一篇文章，我想呈现一个锚标签与后ID作为HREFstring的一部分。

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> ); 

我该怎么做，以便每个职位href的/posts/1 ， /posts/2等？

Answer 1

使用string连接：

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

JSX语法允许使用string或expression式({...})作为值。 你不能混用两者。 在expression式中，可以如名称所示使用任何JavaScriptexpression式来计算值。

Answer 2

您也可以使用ES6反引号语法

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

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

Answer 3

你可以试试吗？

在post中创build另一个项目，如post.link，然后在发送post到渲染函数之前，指定它的链接。

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

所以，上面的渲染函数应该是下面的代替。

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