Accedi agli oggetti di scena tra virgolette in React JSX

In JSX, come si fa a fare riferimento a un valore propsdall'interno di un valore di attributo tra virgolette?

Per esempio:

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

L'output HTML risultante è:

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

React (o JSX) non supporta l'interpolazione variabile all'interno di un valore di attributo, ma è possibile inserire qualsiasi espressione JS all'interno di parentesi graffe come intero valore di attributo, quindi funziona:

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

Se si desidera utilizzare i valori letterali del modello es6, è necessario disporre anche di parentesi graffe attorno ai segni di spunta:

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

Se stai usando JSX con Harmony, puoi farlo:

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

Qui stai scrivendo il valore di srccome espressione.

Invece di aggiungere variabili e stringhe, puoi usare le stringhe modello ES6! Ecco un esempio:

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

Come per tutti gli altri componenti JavaScript all'interno di JSX, utilizzare stringhe di modelli all'interno di parentesi graffe. Per "iniettare" una variabile usa un segno di dollaro seguito da parentesi graffe contenenti la variabile che desideri iniettare. Per esempio:

{`string ${variable} another string`}

Le migliori pratiche sono aggiungere il metodo getter per questo:

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

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

Quindi, se hai più logica in seguito, puoi mantenere il codice senza problemi.

Per le persone, alla ricerca di risposte scritte sulla funzione "mappa" e dati dinamici, ecco un esempio funzionante.

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

Questo dà l'URL come " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (esempio casuale)

Nota: in reazione puoi inserire l'espressione javascript all'interno della parentesi graffa. Possiamo usare questa proprietà in questo esempio.
Nota: dai un'occhiata all'esempio seguente:

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

  }
}

Ecco la migliore opzione per Dynamic className o Props, fai solo un po 'di concatenazione come facciamo in Javascript.

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

Puoi usare

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

o

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

o

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