Bagaimana cara membuat href dinamis dalam fungsi render react?

Saya sedang merender daftar posting. Untuk setiap posting saya ingin membuat tag anchor dengan id posting sebagai bagian dari string 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>
    );

Bagaimana saya melakukannya sehingga setiap posting memiliki href /posts/1, /posts/2dll?

Gunakan penggabungan string:

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

Sintaks JSX memungkinkan penggunaan string atau ekspresi ({...})sebagai nilai. Anda tidak bisa mencampur keduanya. Di dalam ekspresi Anda dapat, seperti namanya, menggunakan ekspresi JavaScript apa pun untuk menghitung nilainya.

Anda juga dapat menggunakan sintaks backtick ES6

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

Info lebih lanjut tentang literal template es6

Selain jawaban Felix,

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

akan bekerja dengan baik juga. Ini bagus karena semuanya dalam satu string.

Bisakah Anda mencobanya?

Buat item lain dalam posting seperti post.link lalu tetapkan link ke item tersebut sebelum mengirim posting ke fungsi render.

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

Jadi, fungsi render di atas seharusnya mengikuti.

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