L'accès à des accessoires à l'intérieur des guillemets à Réagir JSX

Dans JSX, comment faites-vous référence à une valeur de props à l'intérieur de la cité valeur de l'attribut?

Par exemple:

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

Le HTML résultant de sortie est:

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

InformationsquelleAutor cantera | 2014-02-10

438

Réagir (ou JSX) ne prend pas en charge interpolation de variable à l'intérieur d'une valeur d'attribut, mais vous pouvez mettre n'importe quel JS expression à l'intérieur d'accolades comme l'ensemble de la valeur de l'attribut, de sorte que cela fonctionne:
```
<img className="image" src={"images/" + this.props.image} />
```
- Qui fonctionne parfaitement merci pour la réponse rapide.
- qu'en est backtips dans l'es6?
- Super, ça fonctionne, merci!
- Voir Cristi la réponse de stackoverflow.com/a/30061326/70345 ci-dessous.
InformationsquelleAutor Sophie Alpert
214

Si vous souhaitez utiliser l'es6 modèle de littéraux, vous avez besoin des accolades autour de la tique marques ainsi:
```
<img className="image" src={`images/${this.props.image}`} />
```
- l'avenir ES6 Modèle de littéraux
- La chaîne entourée par des backticks est un "modèle " littérale": developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
InformationsquelleAutor Cristi
45

Si vous utilisez JSX de l'Harmonie, vous pourriez faire ceci:
```
<img className="image" src={`images/${this.props.image}`} />
```
Ici, vous êtes à l'écriture de la valeur de src comme une expression.
- c'est quelque chose qui est difficile à trouver. et pour les contenants réutilisables c'est un-devez-savoir
- Pour que l'on ne peut pas se confondre avec l'indication de l'Harmonie, c'est une partie de la ES6 standard, alors que la réponse est datée de quelques mois avant qu'il ne devienne un standard.
InformationsquelleAutor user3089094
8

Au lieu d'ajouter des variables et des chaînes, vous pouvez utiliser l'ES6 modèle de chaînes!
Voici un exemple:
```
<img className="image" src={`images/${this.props.image}`} />
```
Comme pour tous les autres composants JavaScript à l'intérieur de JSX, utiliser un modèle de chaînes à l'intérieur des accolades. À "injecter" une variable d'utiliser un signe de dollar suivie par des accolades contenant les variables que vous voulez injecter. Par exemple:
```
{`string ${variable} another string`}
```
InformationsquelleAutor Saahil
5

Les meilleures pratiques sont à ajouter de la méthode de lecture pour que :
```
getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />
```
Alors , si vous avez plus de logique, plus tard, vous pouvez maintenir le code en douceur.

InformationsquelleAutor Abdennour TOUMI
2

Pour les Gens, à la recherche de réponses w.r.t 'map', de la fonction et de la dynamique de données, voici un exemple de travail.
```
<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" (à tout hasard)

InformationsquelleAutor Ram

Remarque: Dans de réagir, vous pouvez mettre du javascript expression à l'intérieur d'accolades. On peut utiliser cette propriété dans cet exemple.

Remarque: donner un coup d'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>
      );

  }
}

InformationsquelleAutor Kiran

0

Ici est la Meilleure Option pour la Dynamique d'un nom de classe ou les Accessoires , il suffit de faire quelques concaténation comme nous le faisons en Javascript.
```
     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
```
- Je le recommande utilise classnames paquet pour la construction dynamique des noms de classe
InformationsquelleAutor Saad Mirza

Vous devez vous connecter pour publier un commentaire.