J'ai un composant de base que j'aimerais utiliser dans plusieurs instances avec des classes différentes.
<div className="module module--{this.props.classModifier}" ></div>
Lorsque j'effectue le rendu ci-dessus en utilisant <... classmodifier="red "> cela n'affecte pas le rendu et le navigateur affiche {this.props.classModifier}
Quelqu'un peut-il indiquer où et ce que je suis faire mal?
5 Réponses :
Cette syntaxe sera traitée comme une chaîne pure: "module module - {this.props.classModifier}" . Si vous souhaitez ajouter une chaîne à l'aide de JSX, essayez cette syntaxe à la place className = {"module module--" + this.props.classModifier} .
La syntaxe correcte serait:
Vous pouvez utiliser la syntaxe d'interpolation de ES6.
<div className={`module module--${this.props.classModifier}`}></div>
Pas généralement dans les projets React (pour cet exemple spécifique), bien que cela fonctionne . (Ajouter "pourquoi" serait également une bonne chose.)
Plagier @ T.J.Crowder "Pourquoi" serait une extension très utile à votre réponse.
vous devez changer le code pour ceci:
<div className={`module module--${this.props.classModifier}`}></div>
@Ionut - Ah oui. (Huh, normalement je vérifie les modifications ...)
Vous utilisez this.props.classModifier dans un "" pour qu'il s'imprime tel quel. Utiliser des chaînes de modèle
Utilisez ce
className={`module module--${this.props.classModifier}`}
À titre d'explication, si vous n'utilisez que des guillemets doubles, vous ne faites que rendre une chaîne. Il n'obtiendra pas la référence de variable comme ça. Vous devez diviser la variable et les portions de chaîne en l'enveloppant avec les accolades:
//Template Literals
className={`module module--${this.props.classModifier}`}
//Concatenation
className={"module module--" + this.props.classModifier}
La raison principale pour laquelle cela se produit est que le
{this.props.classModifier}est traité comme une chaîne au lieu d'une variable. Vous avez des options. Vous pouvez utiliser la concaténation ou l’interpolation .