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?

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.


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


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.


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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.