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

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

例えば：

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

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

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

React（またはJSX）は属性値内の変数補間をサポートしていませんが、JS式を属性値全体として中括弧内に置くことができるため、次のように機能します。

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

es6テンプレートリテラルを使用する場合は、目盛りも中括弧で囲む必要があります。

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

HarmonyでJSXを使用している場合は、次のようにすることができます。

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

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

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

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

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

{`string ${variable} another string`}

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

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

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

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

「マップ」機能と動的データに対する回答を探している人のために、これが実際の例です。

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

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

注：反応では、中括弧内に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>
      );

  }
}

これは、ダイナミックclassNameまたはPropsに最適なオプションです。JavaScriptで行うように、いくつかの連結を行います。

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

あなたは使うことができます

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

または

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

または

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }