Question

我正在渲染帖子列表。对于每个帖子，我想使用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等的href？

Answer 1

使用字符串连接：

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

JSX语法允许使用字符串或表达式({...})作为值。你不能混合两者。在表达式中，您可以使用任何JavaScript表达式来计算值。

Answer 2

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

$(".popup").click(function() {
     a = $(this).data("item");
     alert(a);
});

More info on es6 template literals

Answer 3

你能试试吗？

在帖子中创建另一个项目，例如 post.link ，然后在将发布发送到渲染功能之前为其指定链接。

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

因此，上面的渲染函数应该是以下。

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

Answer 4

除了Felix的答案，

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

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

如何在反应渲染功能中创建动态href？

4 个答案: