web-dev-qa-db-fra.com

Réagissez JSX: Access Props entre guillemets

Dans JSX, comment référencez-vous une valeur de props à l'intérieur d'une valeur d'attribut citée?

Par exemple:

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

La sortie HTML résultante est:

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

React (ou JSX) ne prend pas en charge l'interpolation de variable dans une valeur d'attribut, mais vous pouvez placer n'importe quelle expression JS dans des accolades comme valeur d'attribut complète, afin que cela fonctionne:

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

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

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

Si vous utilisez JSX avec Harmony, vous pouvez procéder comme suit:

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

Ici, vous écrivez la valeur de src en tant qu’expression.

45
user3089094

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 de JSX, utilisez des chaînes de modèle à l'intérieur d'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`}
7
Saahil

Les meilleures pratiques sont d’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 par la suite, vous pouvez maintenir le code en douceur.

5
Abdennour TOUMI

Pour les personnes recherchant des réponses pour "mapper" une fonction et des données dynamiques, voici un exemple concret. 

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

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

1
Ram

Remarque: dans react, vous pouvez insérer une expression javascript dans une accolade. Nous pouvons utiliser cette propriété dans cet exemple.
Remarque: jetez un oeil à 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>
      );

  }
}
0
Kiran

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

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