it-swarm.com.de

Reagieren Sie JSX: Greifen Sie auf Requisiten in Anführungszeichen zu

Wie referenzieren Sie in JSX einen Wert aus props aus einem Attributwert in Anführungszeichen?

Zum Beispiel:

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

Die resultierende HTML-Ausgabe lautet:

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

React (oder JSX) unterstützt keine Variableninterpolation innerhalb eines Attributwerts. Sie können jedoch einen beliebigen JS-Ausdruck in geschweifte Klammern als gesamten Attributwert einfügen.

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

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}`} />
205
Cristi

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 src als Ausdruck.

45
user3089094

Anstatt Variablen und Zeichenfolgen hinzuzufügen, können Sie die ES6-Vorlagenzeichenfolgen! .__ verwenden. Hier 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 einfügen möchten. Zum Beispiel:

{`string ${variable} another string`}
7
Saahil

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

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

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

Wenn Sie später mehr Logik haben, können Sie den Code problemlos verwalten.

5
Abdennour TOUMI

Für Menschen, die nach Antworten suchen, um Funktion und dynamische Daten "abzubilden", ist hier ein Arbeitsbeispiel. 

<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 (beliebiges Beispiel).

1
Ram

Hinweis: In reagieren können Sie Javascript-Ausdruck in geschweifte Klammer setzen. Wir können diese Eigenschaft in diesem Beispiel verwenden.
Hinweis: Schauen Sie sich das folgende Beispiel 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>
      );

  }
}
0
Kiran

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

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