Como criar href dinâmico na função react render?

105

Estou processando uma lista de postagens. Para cada postagem, gostaria de renderizar uma tag âncora com o id do post como parte da 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>
    );

Como faço para que cada postagem tenha href's de /posts/1, /posts/2etc?

javascript reactjs Connor Leech
fonte

Respostas:

192

Use concatenação de string:

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

A sintaxe JSX permite usar strings ou expressões ({...})como valores. Você não pode misturar os dois. Dentro de uma expressão, você pode, como o nome sugere, usar qualquer expressão JavaScript para calcular o valor.

Felix Kling
fonte
1
muito sensível. Obrigado!
Connor Leech
1
funciona muito bem, mas se você estiver usando um compilador como o babel, as strings de modelo são mais elegantes.
HussienK
e se for um mailto?
tallgirltaadaa
@tallgirltaadaa: sem diferença. JSX / JavaScript não se preocupa com o valor real da string.
Felix Kling
87

Você pode usar a sintaxe de crase ES6 também

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

Mais informações sobre literais de modelo es6

Nath
fonte
para que isso funcione é necessário usar `and not '?
Joe Lloyd
3
Sim, o backtick é uma nova sintaxe es6 para interpolação de string. Minha resposta foi atualizada com um link
Nath
2

Além da resposta de Felix, 

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

funcionaria bem também. Isso é bom porque está tudo em uma string.

talacker
fonte
0

Você poderia tentar isso?

Crie outro item na postagem, como post.link, e atribua o link a ele antes de enviar a postagem para a função de renderização.

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

Portanto, a função de renderização acima deve ser seguida.

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