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}">
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} />
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}`} />
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.
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`}
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.
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)
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>
);
}
}
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"
}