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

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