J'essaie de passer un nom de classe à un composant de réaction pour changer son style et je n'arrive pas à fonctionner:
class Pill extends React.Component {
render() {
return (
<button className="pill {this.props.styleName}">{this.props.children}</button>
);
}
}
<Pill styleName="skill">Business</Pill>
J'essaye de changer le style de la pilule en passant le nom de la classe qui a le style respectif. Je suis nouveau sur React, alors peut-être que je ne fais pas cela de la bonne façon. Merci
javascript
reactjs
Hilarl
la source
la source
Juste pour la référence, pour les composants sans état:
Rendra:
la source
pill ${this.props.styleName}
obtiendra "pill undefined" si vous ne définissez pas les accessoiresje préfère
ou
la source
Pour toute personne intéressée, j'ai rencontré ce même problème lors de l'utilisation de modules css et de la réaction des modules css .
La plupart des composants ont un style de module css associé, et dans cet exemple, mon Button a son propre fichier css, tout comme le composant parent Promo . Mais je souhaite transmettre des styles supplémentaires à Button de Promo
Donc, le
style
bouton capable ressemble à ceci:Button.js
Dans le composant Button ci-dessus, les styles Button.css gèrent les styles de bouton courants. Dans cet exemple, juste une
.button
classeEnsuite, dans mon composant où je veux utiliser le bouton , et je veux également modifier des choses comme la position du bouton, je peux définir des styles supplémentaires
Promo.css
et passer commeclassName
accessoire. Dans cet exemple encore appelé.button
class. J'aurais pu l'appeler n'importe quoi, par exemplepromoButton
.Bien sûr, avec les modules css, cette classe sera
.Promo__button___2MVMD
alors que le bouton sera quelque chose comme.Button__button___3972N
Promo.js
la source
Comme d'autres l'ont indiqué, utilisez une expression interprétée avec des accolades.
Mais n'oubliez pas de définir une valeur par défaut.
D'autres ont suggéré d'utiliser une instruction OR pour définir une chaîne vide if
undefined
.Mais ce serait encore mieux de déclarer vos accessoires.
Exemple complet:
la source
Vous pouvez y parvenir en "interpolant" le nom de classe passé du composant parent au composant enfant à l'aide de
this.props.className
. Exemple ci-dessous:la source
Avec React 16.6.3 et @Material UI 3.5.1, j'utilise des tableaux dans className comme
className={[classes.tableCell, classes.capitalize]}
Essayez quelque chose comme ce qui suit dans votre cas.
la source
Avec le support de React pour l'interpolation de chaîne, vous pouvez effectuer les opérations suivantes:
la source
Dans Typescript, vous devez définir les types de
HTMLAttributes
etReact.FunctionComponent
.Dans la plupart des cas, vous devrez l'étendre à une autre interface ou un autre type.
la source