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

【问题标题】：How to create dynamic href in react render function?如何在反应渲染功能中创建动态href？
【发布时间】：2015-10-12 14:23:46
【问题描述】：

我正在渲染一个帖子列表。对于每篇文章，我都想渲染一个锚标记，并将文章 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？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用字符串连接：

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

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

【讨论】：

非常明智。谢谢！
效果很好，但是如果你使用的是像 babel 这样的编译器，那么模板字符串会更优雅。
如果是 mailto 怎么办？
@tallgirltaadaa：没有区别。 JSX / JavaScript 不关心字符串的实际值。

【解决方案2】：

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

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

More info on es6 template literals

【讨论】：

为了这个工作是否有必要使用`而不是'？
是的，反引号是用于字符串插值的新 es6 语法，用链接更新了我的答案

【解决方案3】：

除了菲利克斯的回答，

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

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

【讨论】：

【解决方案4】：

你能试试这个吗？

在帖子中创建另一个项目，例如 post.link，然后将链接分配给它，然后将 post 发送到渲染函数。

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

所以，上面的渲染函数应该改为跟随。

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

【讨论】：