319

JSX ではprops、引用符で囲まれた属性値内からどのように値を参照しますか?

例えば：

<img className="image" src="images/{this.props.image}" />

結果の HTML 出力は次のとおりです。

<img class="image" src="images/{this.props.image}">
4

9 に答える 9

502

React (または JSX) は属性値内の変数補間をサポートしていませんが、属性値全体として中括弧内に任意の JS 式を配置できるため、これは機能します。

<img className="image" src={"images/" + this.props.image} />
于 2014-02-10T02:21:15.187 に答える
8

ベスト プラクティスは、そのための getter メソッドを追加することです。

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

その後、後でさらにロジックがあれば、コードをスムーズに維持できます。

于 2017-02-20T19:58:41.130 に答える
2

「マップ」関数と動的データに対する答えを探している人々の場合、ここに実際の例があります。

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

これにより、URL は " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (ランダムな例)になります。

于 2015-11-18T22:35:04.720 に答える
1

動的な className または Props の最適なオプションは次のとおりです。Javascript で行うように連結を行うだけです。

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
于 2018-08-06T07:25:02.080 に答える