反応レンダリング関数で動的hrefを作成する方法は？

投稿のリストをレンダリングしています。各投稿について、href文字列の一部として投稿IDを含むアンカータグをレンダリングしたいと思います。

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テンプレートリテラルの詳細

フェリックスの答えに加えて、

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

うまくいくだろう。これはすべて1つの文字列に含まれているため便利です。

これを試して頂けますか？

post.linkなどのpost内に別のアイテムを作成し、そのアイテムにリンクを割り当ててから、投稿をrender関数に送信します。

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

したがって、上記のレンダー関数は代わりに続く必要があります。

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