web-dev-qa-db-fra.com

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

Je suis en train de rendre une liste de messages. Pour chaque article, je souhaite rendre une balise d'ancrage avec l'identifiant de l'article dans 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 puis-je le faire pour que chaque message ait un href de /posts/1, /posts/2 etc.?

javascriptreactjs
86
Connor Leech

Utilisez la concaténation de chaînes:

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

La syntaxe JSX permet d'utiliser des chaînes ou des expressions ({...}) en tant que 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.

158
Felix Kling

Vous pouvez aussi utiliser la syntaxe de backtick ES6

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

Plus d'informations sur les modèles littéraux es6

83
Nath

Pourriez-vous s'il vous plaît essayer ceci?

Créez un autre élément dans le post tel que post.link puis assignez le lien avant l'envoi post à la fonction de rendu.

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

Donc, la fonction de rendu ci-dessus devrait être suivie à la place.

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