Dostęp do rekwizytów w cudzysłowach w React JSX

Jak w JSX odwołujesz się do wartości propsz wewnątrz cytowanej wartości atrybutu?

Na przykład:

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

Wynikowy wynik HTML to:

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

React (lub JSX) nie obsługuje interpolacji zmiennych w wartości atrybutu, ale możesz umieścić dowolne wyrażenie JS w nawiasach klamrowych jako całą wartość atrybutu, więc działa to:

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

Jeśli chcesz użyć literałów szablonu es6, potrzebujesz również nawiasów klamrowych wokół znaczników:

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

Jeśli używasz JSX z Harmony, możesz to zrobić:

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

Tutaj piszesz wartość srcjako wyrażenie.

Zamiast dodawać zmienne i ciągi, możesz użyć ciągów szablonów ES6! Oto przykład:

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

Podobnie jak w przypadku wszystkich innych składników JavaScript w JSX, użyj ciągów szablonów w nawiasach klamrowych. Aby „wstrzyknąć” zmienną, użyj znaku dolara, a następnie nawiasów klamrowych zawierających zmienną, którą chcesz wstrzyknąć. Na przykład:

{`string ${variable} another string`}

Najlepsze praktyki to dodanie do tego metody gettera:

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

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

Następnie, jeśli masz więcej logiki, możesz płynnie utrzymywać kod.

Dla ludzi, którzy szukają odpowiedzi na funkcję „map” i dane dynamiczne, oto działający przykład.

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

Daje to adres URL jako „ http://examole.com/randomview/images/2/dp_pics/182328.jpg ” (przykład losowy)

Uwaga: W reakcji możesz umieścić wyrażenie javascript w nawiasach klamrowych. Możemy użyć tej właściwości w tym przykładzie.
Uwaga: spójrz na poniższy przykład:

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

  }
}

Oto najlepsza opcja dla Dynamic className lub Props, po prostu wykonaj konkatenację, tak jak robimy to w JavaScript.

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

możesz użyć

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

lub

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

lub

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