Akses alat peraga di dalam kutipan di Bereaksi JSX

Di BEJ, bagaimana Anda referensi nilai propsdari dalam nilai atribut yang dikutip?

Sebagai contoh:

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

Output HTML yang dihasilkan adalah:

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

Bereaksi (atau JSX) tidak mendukung interpolasi variabel di dalam nilai atribut, tetapi Anda bisa meletakkan ekspresi JS apa pun di dalam kurung kurawal sebagai keseluruhan nilai atribut, jadi ini berfungsi:

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

Jika Anda ingin menggunakan literal templat es6, Anda juga perlu tanda kurung di sekitar tanda centang:

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

Jika Anda menggunakan JSX dengan Harmony, Anda bisa melakukan ini:

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

Di sini Anda menulis nilai srcsebagai ekspresi.

Alih-alih menambahkan variabel dan string, Anda dapat menggunakan string template ES6! Berikut ini sebuah contoh:

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

Adapun semua komponen JavaScript lainnya di dalam JSX, gunakan string template di dalam kurung kurawal. Untuk "menyuntikkan" variabel, gunakan tanda dolar diikuti oleh kurung kurawal yang berisi variabel yang ingin Anda suntikkan. Sebagai contoh:

{`string ${variable} another string`}

Praktik terbaik adalah menambahkan metode pengambil untuk itu:

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

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

Kemudian, jika Anda memiliki lebih banyak logika nanti, Anda dapat mempertahankan kode dengan lancar.

Untuk Orang-orang, mencari jawaban yang berkaitan dengan fungsi 'peta' dan data dinamis, berikut adalah contoh yang berfungsi.

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

Ini memberikan URL sebagai " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (contoh acak)

Catatan: Sebagai reaksi Anda dapat menempatkan ekspresi javascript di dalam kurung kurawal. Kita dapat menggunakan properti ini dalam contoh ini.
Catatan: lihat satu contoh di bawah ini:

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

  }
}

Berikut adalah Pilihan Terbaik untuk className atau Alat Peraga Dinamis, cukup lakukan beberapa penggabungan seperti yang kami lakukan dalam Javascript.

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

kamu bisa memakai

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

atau

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

atau

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