Greifen Sie in React JSX auf Requisiten in Anführungszeichen zu

Wie referenzieren Sie in JSX einen Wert aus propseinem angegebenen Attributwert heraus?

Beispielsweise:

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

Die resultierende HTML-Ausgabe lautet:

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

React (oder JSX) unterstützt keine Variableninterpolation innerhalb eines Attributwerts, aber Sie können jeden JS-Ausdruck in geschweiften Klammern als gesamten Attributwert einfügen. Dies funktioniert also:

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

Wenn Sie die es6-Vorlagenliterale verwenden möchten, benötigen Sie auch Klammern um die Häkchen:

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

Wenn Sie JSX mit Harmony verwenden, können Sie Folgendes tun:

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

Hier schreiben Sie den Wert von srcals Ausdruck.

Anstatt Variablen und Zeichenfolgen hinzuzufügen, können Sie die ES6-Vorlagenzeichenfolgen verwenden! Hier ist ein Beispiel:

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

Verwenden Sie für alle anderen JavaScript-Komponenten in JSX Vorlagenzeichenfolgen in geschweiften Klammern. Um eine Variable zu "injizieren", verwenden Sie ein Dollarzeichen, gefolgt von geschweiften Klammern, die die Variable enthalten, die Sie injizieren möchten. Beispielsweise:

{`string ${variable} another string`}

Best Practices sind das Hinzufügen einer Getter-Methode dafür:

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

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

Wenn Sie später mehr Logik haben, können Sie den Code reibungslos pflegen.

Für Personen, die nach Antworten auf die Kartenfunktion und dynamische Daten suchen, ist hier ein funktionierendes Beispiel.

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

Dies gibt die URL als " http://examole.com/randomview/images/2/dp_pics/182328.jpg " an (zufälliges Beispiel)

Hinweis: In Reaktion können Sie Javascript-Ausdrücke in geschweifte Klammern setzen. Wir können diese Eigenschaft in diesem Beispiel verwenden.
Hinweis: Schauen Sie sich das folgende Beispiel einmal an:

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

  }
}

Hier ist die beste Option für dynamische Klassennamen oder Requisiten. Führen Sie einfach eine Verkettung durch, wie wir es in Javascript tun.

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

Sie können verwenden

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

oder

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

oder

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