React JSX: access Props in Quotes

Jeśli chcesz używać literałów szablonów es6, potrzebujesz szelek wokół znaków kleszcza:

<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 zapisujesz wartość src jako wyrażenie.

Najlepsze praktyki polegają na dodaniu do tego metody gettera:

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

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

Następnie, jeśli masz więcej logiki później, można utrzymać kod płynnie.

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

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

Podobnie jak wszystkie inne komponenty JavaScript wewnątrz JSX, użyj łańcuchów szablonów wewnątrz nawiasów 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`}

Dla ludzi, szukających odpowiedzi w. r. t do funkcji "map" i dynamicznych danych, oto działający przykład.

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

To daje adres URL jako " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (przykład losowy)

Uwaga: w reaccie możesz umieścić wyrażenie javascript wewnątrz nawiasów 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>
      );

  }
}

Tutaj jest najlepsza opcja dla Dynamic className lub Props, po prostu zrób trochę konkatenacji, tak jak robimy to w Javascript.

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