web-dev-qa-db-ja.com

React JSXで引用符内の小道具にアクセスする

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

例えば：

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

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

<img class="image" src="images/{this.props.image}">
javascriptreactjsreact-props
258
cantera

React（またはJSX）は属性値内の変数補間をサポートしていませんが、中括弧内のJS式はすべて属性値として使用できます。したがって、これは機能します。

<img className="image" src={"images/" + this.props.image} />
438
Sophie Alpert

Es6テンプレートリテラルを使用したい場合は、目盛りを囲むブレースも必要です。

<img className="image" src={`images/${this.props.image}`} />
214
Cristi

HarmonyでJSXを使用しているなら、これを実行できます。

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

ここではsrcの値を式として書いています。

45
user3089094

変数と文字列を追加する代わりに、ES6テンプレート文字列を使用できます。これが一例です。

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

JSX内の他のすべてのJavaScriptコンポーネントと同様に、波括弧の内側にテンプレート文字列を使用します。変数を「注入」するには、ドル記号の後に注入したい変数を含む中括弧を続けます。例えば：

{`string ${variable} another string`}
8
Saahil

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

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

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

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

5
Abdennour TOUMI

人々にとって、 'map'関数と動的データに対する答えを探してみると、ここに実用的な例があります。

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

これはURLを " http://examole.com/randomview/images/2/dp_pics/182328.jpg "（ランダムな例）として与えます。

2
Ram

注：反応的には、JavaScriptの式を中括弧で囲むことができます。この例ではこのプロパティを使用できます。
注：以下の例を見てください。

class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}
0
Kiran

これが動的なclassNameまたはPropsのための最良の選択肢です。Javascriptで行うように、単にいくつか連結してください。

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
0
Saad Mirza