¿Cómo crear href dinámico en la función de renderizado de reacción?

Estoy mostrando una lista de publicaciones. Para cada publicación, me gustaría representar una etiqueta de anclaje con la identificación de la publicación como parte de la cadena 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>
    );

¿Cómo lo hago para que cada publicación tenga href de /posts/1, /posts/2etc.?

Utilice la concatenación de cadenas:

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

La sintaxis JSX permite utilizar cadenas o expresiones ({...})como valores. No puedes mezclar ambos. Dentro de una expresión, puede, como sugiere su nombre, utilizar cualquier expresión de JavaScript para calcular el valor.

También puede usar la sintaxis de comillas invertidas de ES6

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

Más información sobre literales de plantilla es6

Además de la respuesta de Felix,

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

también funcionaría bien. Esto es bueno porque está todo en una sola cadena.

¿Podrías intentar esto?

Cree otro elemento en la publicación como post.link y luego asígnele el enlace antes de enviar la publicación a la función de renderizado.

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

Entonces, la función de renderización anterior debería seguir en su lugar.

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