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

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