Ich versuche, einen Klassennamen an eine Reaktionskomponente zu übergeben, um deren Stil zu ändern, und kann anscheinend nicht funktionieren:
class Pill extends React.Component {
render() {
return (
<button className="pill {this.props.styleName}">{this.props.children}</button>
);
}
}
<Pill styleName="skill">Business</Pill>
Ich versuche, den Stil der Pille zu ändern, indem ich den Namen der Klasse übergebe, die den jeweiligen Stil hat. Ich bin neu in React, also mache ich das vielleicht nicht richtig. Vielen Dank
javascript
reactjs
Hilarl
quelle
quelle
Nur als Referenz für zustandslose Komponenten:
Wird rendern:
quelle
pill ${this.props.styleName}
wird "Pille undefiniert" erhalten, wenn Sie die Requisiten nicht einstellenich bevorzuge
oder
quelle
Für alle Interessierten stieß ich auf dasselbe Problem, wenn ich CSS-Module verwendete und CSS-Module reagierte .
Den meisten Komponenten ist ein CSS-Modulstil zugeordnet. In diesem Beispiel verfügt mein Button über eine eigene CSS-Datei, ebenso wie die übergeordnete Promo- Komponente. Aber ich möchte Button von Promo einige zusätzliche Stile übergeben
Der
style
fähige Button sieht also so aus:Button.js
In der obigen Button-Komponente behandeln die Button.css- Stile die allgemeinen Button-Stile. In diesem Beispiel nur eine
.button
KlasseDann in meiner Komponente , wo ich will die verwenden Knopf , und ich möchte auch , wie die Position der Schaltfläche Dinge ändern, ich zusätzliche Stile festlegen
Promo.css
und durch alsclassName
Stütze. In diesem Beispiel wieder.button
Klasse genannt. Ich hätte es alles nennen können, zpromoButton
.Natürlich wird diese Klasse mit CSS-Modulen sein,
.Promo__button___2MVMD
während die Schaltfläche so etwas wie sein wird.Button__button___3972N
Promo.js
quelle
Verwenden Sie, wie bereits erwähnt, einen interpretierten Ausdruck mit geschweiften Klammern.
Vergessen Sie jedoch nicht, einen Standard festzulegen.
Andere haben vorgeschlagen, eine OR-Anweisung zu verwenden, um eine leere Zeichenfolge zu setzen, wenn
undefined
.Aber es wäre noch besser, deine Requisiten zu deklarieren.
Vollständiges Beispiel:
quelle
Sie können dies erreichen, indem Sie den von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Klassennamen mit "interpolieren"
this.props.className
. Beispiel unten:quelle
Mit React 16.6.3 und @Material UI 3.5.1 verwende ich Arrays in className wie
className={[classes.tableCell, classes.capitalize]}
Versuchen Sie in Ihrem Fall Folgendes.
quelle
Mit der Unterstützung von React für die Zeichenfolgeninterpolation können Sie Folgendes tun:
quelle
In Typescript müssen Sie Typen von
HTMLAttributes
und festlegenReact.FunctionComponent
.In den meisten Fällen müssen Sie es auf eine andere Schnittstelle oder einen anderen Typ erweitern.
quelle