JSX - 画像を読み込み

Question

私はreactjsで遊んでいて、クリックして画像を変更しようとしています。画像を見つけることに問題があるようです。

コードの一部は次のとおりです。

render() { 
    const text = this.state.liked ? 'holes' : 'emilia'; 
    return (
     <div className={text} onClick={this.handleClick}> 
     <h1>You like {text}. Click to toggle</h1> 
     <img src="images/{text}.jpg" /> 

     </div> 

    ); 
    } 

あなたは、イメージがアクセスできるハードコードされている場合は、「画像/ emilia.jpg」または「画像/ holes.jpg」。 <h1>要素が「穴」と「エミリア」を正しく切り替えるので、onclickイベントは正常に機能します。

上記の例のように、imgへのパスの一部はどのように変数になりますか？

Answer 1

これをES6で書いているので、あなたが求めていることをする1つの方法は、文字列リテラルを使用することです。

<img src={`images/${text}.jpg`} /> 

また、文字列の連結を使用することができますが、私は上記の方法が最も読みやすいですし、あなたが既に書かれたものと密接に次のだと思います。

Answer 2

`あなたは

src={"images/" + text + ".jpg"} 

を使うべきか、ES6を使用している場合、あなただけの

src={`images/${text}.jpg`}