Comment créer un href dynamique dans la fonction de rendu de réaction?

105

Je suis en train de rendre une liste de messages. Pour chaque article, je voudrais rendre une balise d'ancrage avec l'identifiant de l'article dans le cadre de la chaîne 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>
    );

Comment faire pour que chaque message ait des href de /posts/1, /posts/2etc.?

javascript reactjs Connor Leech
la source

Réponses:

192

Utilisez la concaténation de chaînes:

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

La syntaxe JSX permet d'utiliser des chaînes ou des expressions ({...})comme valeurs. Vous ne pouvez pas mélanger les deux. Dans une expression, vous pouvez, comme son nom l'indique, utiliser n'importe quelle expression JavaScript pour calculer la valeur.

Félix Kling
la source
1
très raisonnable. Merci!
Connor Leech
1
fonctionne très bien, mais si vous utilisez un compilateur comme babel, les chaînes de modèle sont plus élégantes.
HussienK
et si c'était un mailto?
tallgirltaadaa
@tallgirltaadaa: aucune différence. JSX / JavaScript ne se soucie pas de la valeur réelle de la chaîne.
Felix Kling
87

Vous pouvez également utiliser la syntaxe de backtick ES6

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

Plus d'informations sur les littéraux de modèle ES6

Nath
la source
pour que cela fonctionne, faut-il utiliser «et non»?
Joe Lloyd
3
Oui, le backtick est une nouvelle syntaxe es6 pour l'interpolation de chaîne, mise à jour ma réponse avec un lien
Nath
2

En plus de la réponse de Félix, 

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

fonctionnerait bien aussi. C'est bien parce que tout est dans une seule chaîne.

thalacker
la source
0

Pouvez-vous essayer ceci?

Créez un autre élément dans la publication, comme post.link, puis attribuez-lui le lien avant d'envoyer la publication à la fonction de rendu.

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

Ainsi, la fonction de rendu ci-dessus devrait suivre à la place.

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