Wie erstelle ich dynamische Href in der React-Render-Funktion?

Ich mache eine Liste von Beiträgen. Für jeden Beitrag möchte ich ein Anker-Tag 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="https://stackoverflow.com/posts/"{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

Wie mache ich das, damit jeder Beitrag href’s von hat /posts/1, /posts/2 etc?

Verwenden Sie die Zeichenfolgenverkettung:

href={"https://stackoverflow.com/posts/" + post.id}

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

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

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

Weitere Informationen zu es6-Vorlagenliteralen

Zusätzlich zu Felix’ Antwort,

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

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

Könntest du das bitte versuchen?

Erstellen Sie ein weiteres Element in der Post, z post.link weisen Sie ihm dann vor dem Senden den Link zu Post zur Renderfunktion.

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>