Wie erstelle ich eine dynamische href in der React Render-Funktion?

105

Ich rendere eine Liste von Beiträgen. Für jeden Beitrag möchte ich ein Ankertag mit der Beitrags-ID als Teil der href-Zeichenfolge rendern.

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>
    );

Wie mache ich es so , dass jeder Beitrag href die von hat /posts/1, /posts/2etc?

javascript reactjs Connor Leech
quelle

Antworten:

192

Verwenden Sie die Verkettung von Zeichenfolgen:

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

Die JSX-Syntax ermöglicht die Verwendung von Zeichenfolgen oder Ausdrücken ({...})als Werte. Sie können nicht beide mischen. Innerhalb eines Ausdrucks können Sie, wie der Name schon sagt, einen beliebigen JavaScript-Ausdruck verwenden, um den Wert zu berechnen.

Felix Kling
quelle
1
sehr sensibel. Vielen Dank!
Connor Leech
1
funktioniert gut, aber wenn Sie einen Compiler wie babel verwenden, sind Vorlagenzeichenfolgen eleganter.
HussienK
Was ist, wenn es ein Mailto ist?
Tallgirltaadaa
@allgirltaadaa: kein Unterschied. JSX / JavaScript kümmert sich nicht um den tatsächlichen Wert der Zeichenfolge.
Felix Kling
87

Sie können auch die ES6-Backtick-Syntax verwenden

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

Weitere Informationen zu es6-Vorlagenliteralen

Nath
quelle
Damit dies funktioniert, ist es notwendig, "und nicht" zu verwenden?
Joe Lloyd
3
Ja, der Backtick ist eine neue es6-Syntax für die String-Interpolation. Meine Antwort wurde mit einem Link aktualisiert
Nath
2

Zusätzlich zu Felix 'Antwort 

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

würde auch gut funktionieren. Das ist schön, weil alles in einer Saite ist.

Thalacker
quelle
0

Könnten Sie das bitte versuchen?

Erstellen Sie ein anderes Element im Beitrag, z. B. post.link, und weisen Sie ihm den Link zu, bevor Sie den Beitrag an die Renderfunktion senden .

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

Daher sollte stattdessen die obige Renderfunktion folgen.

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