Jak stworzyć dynamiczny href w funkcji react render?

Renderuję listę postów. Dla każdego posta chciałbym wyrenderować tag kotwicy z identyfikatorem posta jako częścią ciągu 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>
    );

W jaki sposób mogę to zrobić tak, że każdy post ma href dnia /posts/1, /posts/2etc?

Użyj konkatenacji ciągów:

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

Składnia JSX pozwala na użycie ciągów znaków lub wyrażeń ({...})jako wartości. Nie możesz mieszać obu. Wewnątrz wyrażenia możesz, jak sugeruje nazwa, użyć dowolnego wyrażenia JavaScript do obliczenia wartości.

Możesz także użyć składni backtick ES6

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

Więcej informacji na temat literałów szablonów es6

Oprócz odpowiedzi Felixa,

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

działałby dobrze. To jest fajne, ponieważ wszystko jest w jednym ciągu.

Czy mógłbyś tego spróbować?

Utwórz inny element w poście, taki jak post.link, a następnie przypisz do niego link przed wysłaniem posta do funkcji renderowania.

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

Dlatego powyższa funkcja renderująca powinna być zamiast tego.

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