如何在react render函数中创建动态href？

我正在渲染帖子列表。对于每个帖子，我都希望呈现一个带有帖子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>
    );

我该如何做才能使每个帖子都具有href的/posts/1，/posts/2等等？

使用字符串串联：

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

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

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

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

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

除了Felix的答案，

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

也会很好地工作。很好，因为它全都在一个字符串中。

你可以试试这个吗？

在帖子中创建另一个项目，例如post.link，然后在将帖子发送到render函数之前为其分配链接。

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

因此，上面的render函数应该紧随其后。

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