1. ホーム
  2. javascript

[解決済み] reactのrender関数でdynamic hrefを作成するには?

2022-07-10 19:33:39

質問

私は投稿のリストをレンダリングしています。各投稿について、href文字列の一部として投稿IDを持つアンカータグをレンダリングしたいと思います。

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

各投稿のhrefに /posts/1 , /posts/2 などでしょうか?

どのように解決するのですか?

文字列の連結を使用します。

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

JSXの構文では、文字列か式を使うことができます。 ({...}) を値として使うことができます。両方を混ぜることはできません。式の内部では、その名前が示すように、値を計算するために任意のJavaScript式を使用することができます。