Come creare un href dinamico nella funzione di rendering React?

105

Sto visualizzando un elenco di post. Per ogni post vorrei rendere un tag di ancoraggio con l'ID del post come parte della stringa 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>
    );

Come faccio in modo che ogni post abbia href di /posts/1, /posts/2ecc.?

javascript reactjs

— Connor Leech
fonte

192

Usa la concatenazione di stringhe:

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

La sintassi JSX consente di utilizzare stringhe o espressioni ({...})come valori. Non puoi mescolare entrambi. All'interno di un'espressione è possibile, come suggerisce il nome, utilizzare qualsiasi espressione JavaScript per calcolare il valore.

— Felix Kling
fonte

1

molto ragionevole. Grazie!

— Connor Leech

1

funziona alla grande, ma se stai usando un compilatore come babel, le stringhe del modello sono più eleganti.

— HussienK,

e se fosse un mailto?

— tallgirltaadaa

@tallgirltaadaa: nessuna differenza. JSX / JavaScript non si preoccupa del valore effettivo della stringa.

— Felix Kling

87

Puoi anche usare la sintassi backtick di ES6

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

Maggiori informazioni sui letterali modello es6

— Nath
fonte

perché funzioni è necessario usare "e non"?

— Joe Lloyd

3

Sì, il backtick è una nuova sintassi es6 per l'interpolazione di stringhe, ho aggiornato la mia risposta con un collegamento

— Nath

2

Oltre alla risposta di Felix,

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

funzionerebbe bene anche. Questo è bello perché è tutto in una stringa.

— Thalacker
fonte

0

Potresti provare questo?

Crea un altro elemento nel post come post.link, quindi assegna il link ad esso prima di inviare il post alla funzione di rendering.

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

Quindi, la funzione di rendering sopra dovrebbe essere seguita invece.

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

— Khachornchit Songsaen
fonte