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

javascript reactjs

2022-08-30 04:20:32

我正在呈现帖子列表。对于每个帖子，我想呈现一个锚点标签，帖子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

答案 1

使用字符串串联：

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

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

答案 2

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

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

有关 es6 模板文本的详细信息