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

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

如何做到这一点,使每个岗位有HREF的/posts/1,/posts/2等等？

Answer 1

使用字符串连接:

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

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

Answer 2

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

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

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

Answer 3

除了菲利克斯的回答，

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

也会很好用。这很好，因为它都在一个字符串中。