Accédez aux accessoires entre guillemets dans React JSX

Dans JSX, comment référencez-vous une valeur propsde l'intérieur d'une valeur d'attribut entre guillemets?

Par exemple:

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

La sortie HTML résultante est:

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

React (ou JSX) ne prend pas en charge l'interpolation de variable à l'intérieur d'une valeur d'attribut, mais vous pouvez mettre n'importe quelle expression JS entre accolades comme valeur d'attribut entière, donc cela fonctionne:

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

Si vous souhaitez utiliser les littéraux de modèle es6, vous avez également besoin d'accolades autour des graduations:

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

Si vous utilisez JSX avec Harmony, vous pouvez le faire:

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

Ici, vous écrivez la valeur de srccomme expression.

Au lieu d'ajouter des variables et des chaînes, vous pouvez utiliser les chaînes de modèle ES6! Voici un exemple:

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

Comme pour tous les autres composants JavaScript à l'intérieur de JSX, utilisez des chaînes de modèle à l'intérieur des accolades. Pour «injecter» une variable, utilisez un signe dollar suivi d'accolades contenant la variable que vous souhaitez injecter. Par exemple:

{`string ${variable} another string`}

Les meilleures pratiques consistent à ajouter une méthode getter pour cela:

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

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

Ensuite, si vous avez plus de logique plus tard, vous pouvez gérer le code en douceur.

Pour les personnes qui recherchent des réponses par rapport à la fonction de «cartographie» et aux données dynamiques, voici un exemple pratique.

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

Cela donne l'URL comme " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (exemple aléatoire)

Remarque: En réaction, vous pouvez mettre l'expression javascript entre accolades. Nous pouvons utiliser cette propriété dans cet exemple.
Remarque: jetez un œil à l'exemple ci-dessous:

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

  }
}

Voici la meilleure option pour Dynamic className ou Props, faites juste une concaténation comme nous le faisons en Javascript.

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

vous pouvez utiliser

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

ou

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

ou

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