Reagieren JSX: Zugriff Requisiten in Anführungszeichen

Question

Wie referenzieren Sie in JSX einen Wert von props von innerhalb eines angegebenen Attributwerts?

Zum Beispiel:

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

Der resultierende HTML-Ausgabe ist:

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

Answer 1

reagieren (oder JSX) unterstützt keine variable Interpolation innerhalb eines Attributwert, aber Sie können einen beliebigen JS Ausdruck setzen innerhalb geschweiften Klammern als der gesamte Attributwert, so funktioniert das:

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

Answer 2

Wenn du bist Verwendung von JSX mit Harmony, können Sie dies tun:

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

Hier schreiben Sie den Wert src als Ausdruck.

Answer 3

Wenn Sie die es6 Vorlage Literale verwenden möchten, müssen Sie Klammern um den Markierungen auch:

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

Answer 4

Für Menschen, auf der Suche nach Antworten WRT auf ‚Karte‘ Funktion und dynamische Daten, hier ist 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" (random Beispiel)

Answer 5

Best Practices sind Getter-Methode für das hinzufügen:

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

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

Dann, wenn Sie später mehr Logik, Sie können den Code reibungslos pflegen.

Answer 6

Hinweis: In Reaktion können Sie Javascript-Ausdruck in geschweifte Klammer setzen. Wir können diese Eigenschaft in diesem Beispiel verwenden.
Hinweis: Ein Blick auf unter Beispiel:

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

    } 
}