In React können Sie ein Objekt eindeutig erstellen und als Inline-Stil zuweisen. dh. unten genannten.
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
var divStyle2 = {fontSize: '18px'};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
Wie kann ich mehrere Objekte kombinieren und zusammen zuweisen?
Antworten:
Wenn Sie React Native verwenden, können Sie die Array-Notation verwenden:
Schauen Sie sich dazu meinen ausführlichen Blog-Beitrag an.
quelle
<View style={this.state.error == false ? styles.base : [styles.base, {backgroundColor: 'red'}]} />
StyleSheet.compose()
möglicherweise effizienter , außerhalb der Renderfunktion zu arbeiten. Es wird ein neues statisches Stylesheet erstellt, das nur einmal über die Bridge gesendet wird. (Dieser Rat gilt nicht für Stile, die sich zur Laufzeit ändern oder die inline statt in einem StyleSheet sind.)Sie können den Spread-Operator verwenden:
quelle
<div style={{ ...LEGEND_STYLE.box_base, ...{ 'background': '#123456' } }} />
<div style={LEGEND_STYLE.box_gen('#123456')}
Sie können dies mit tun
Object.assign()
.In Ihrem Beispiel würden Sie Folgendes tun:
Dadurch werden die beiden Stile zusammengeführt. Der zweite Stil ersetzt den ersten, wenn übereinstimmende Eigenschaften vorhanden sind.
Wie Brandon bemerkte, sollten Sie verwenden,
Object.assign({}, divStyle, divStyle2)
wenn SiedivStyle
ohne die darauf angewendete Schriftgröße wiederverwenden möchten.Ich verwende dies gerne, um Komponenten mit Standardeigenschaften zu erstellen. Hier ist zum Beispiel eine kleine zustandslose Komponente mit einer Standardeinstellung
margin-right
:Also können wir so etwas rendern:
Welches wird uns das Ergebnis geben:
quelle
Object.assign()
auf eine Weise missbraucht , die zu unerwünschten Konsequenzen führen würde. Sehen Sie die Antwort hier eine zuverlässigere Lösung.Object.assign()
in Ihrer Antwort zwei verschiedene Verwendungsmöglichkeiten an. Der erste in den ersten Sätzen ist ein Beispiel für den von mir identifizierten Missbrauch (dh wenn OP das getan hat, was Sie in Ihrem erstencode
Block empfohlen haben, würde er / sie mutieren{divStyle}
). der zweite Weg - das heißt, es in einer Funktion Umwickeln wie Sie haben, funktionieren wird, aber die Antwort darauf nicht klar machen , dass Sie arbeiten rund umObject.assign()
‚s gemeinsame‚Gotcha‘wrt Unveränderlichkeit (obwohl ich persönlich denke , es ist ein wenig ist umständlich, eine benutzerdefinierte zustandslose Funktion für jede Standardkomponente zu schreiben).Im Gegensatz zu React Native können wir in React keine Reihe von Stilen übergeben, wie z
In React müssen wir das einzelne Objekt von Stilen erstellen, bevor wir es an die Stileigenschaft übergeben. Mögen:
Wir haben den ES6- Spread-Operator verwendet , um zwei Stile zu kombinieren. Sie können auch Object.assign () für denselben Zweck verwenden.
Dies funktioniert auch, wenn Sie Ihren Stil nicht in einer Variablen speichern müssen
quelle
Object.assign()
ist eine einfache Lösung, aber die Verwendung der (derzeit) besten Antwort - obwohl dies für die Herstellung zustandsloser Komponenten in Ordnung ist, führt dies zu Problemen für das vom OP gewünschte Ziel, zweistate
Objekte zusammenzuführen.Mit zwei Argumenten
Object.assign()
wird das erste Objekt tatsächlich an Ort und Stelle mutiert, was sich auf zukünftige Instanziierungen auswirkt.Ex:
Betrachten Sie zwei mögliche Stilkonfigurationen für eine Box:
Wir möchten also, dass alle unsere Boxen Standard-Box-Stile haben, aber einige mit einer anderen Farbe überschreiben:
Nach
Object.assign()
der Ausführung wird das Objekt 'styles.box' endgültig geändert.Die Lösung besteht darin, ein leeres Objekt an zu übergeben
Object.assign()
. Auf diese Weise weisen Sie die Methode an, ein NEUES Objekt mit den Objekten zu erstellen, die Sie übergeben. Wie so:Diese Vorstellung von Objekten, die an Ort und Stelle mutieren, ist für React von entscheidender Bedeutung, und die ordnungsgemäße Verwendung
Object.assign()
ist für die Verwendung von Bibliotheken wie Redux sehr hilfreich.quelle
Die Array-Notation ist die beste Möglichkeit, Stile in React Native zu kombinieren.
Dies zeigt, wie 2 Stilobjekte kombiniert werden.
Dies zeigt, wie Style-Objekt und -Eigenschaft kombiniert werden.
Dies funktioniert bei jeder reaktiven nativen Anwendung.
quelle
React
, nichtReact Native
Sie können Klassen auch mit Inline-Styling wie folgt kombinieren:
quelle
Tatsächlich gibt es eine formale Möglichkeit zum Kombinieren und es ist wie folgt:
Es gibt jedoch ein kleines Problem : Wenn eines davon von der übergeordneten Komponente übergeben wird und auf kombinierte formale Weise erstellt wurde, haben wir ein großes Problem:
Und diese letzte Zeile führt zu einem UI-Fehler. React Native kann sicherlich nicht mit einem tiefen Array innerhalb eines Arrays umgehen. Also erstelle ich meine Hilfsfunktion:
Wenn Sie my
styleJoiner
überall verwenden, können Sie jede Art von Stil kombinieren und Stile kombinieren. Selbstundefined
oder andere nutzlose Typen führen nicht dazu, dass das Styling beschädigt wird.quelle
Ich habe festgestellt, dass dies für mich am besten funktioniert. Es überschreibt wie erwartet.
quelle
Wenn Sie diese Lösung in React suchen, sollten Sie Folgendes verwenden: babel-plugin-transform-object-rest-verbreiten.
Installieren Sie es per npm-Modul und konfigurieren Sie Ihre .babelrc als solche:
Dann können Sie wie ...
Weitere Informationen: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/
quelle
Um dies noch weiter zu führen, können Sie eine klassennamenähnliche Hilfsfunktion erstellen :
Und verwenden Sie es dann bedingt in Ihren Komponenten:
quelle
Im Grunde sehe ich das falsch. Soweit ich weiß, handelt es sich hierbei nicht um eine reaktionsspezifische Frage, sondern vielmehr um eine JavaScript-Frage, wie ich zwei JavaScript-Objekte miteinander kombiniere (ohne die ähnlich benannten Eigenschaften zu beeinträchtigen).
In dieser StackOverflow-Antwort wird dies erklärt. Wie kann ich Eigenschaften von zwei JavaScript-Objekten dynamisch zusammenführen?
In jQuery kann ich die Extend-Methode verwenden.
quelle
Um die Aussagen von @PythonIsGreat zu erweitern, erstelle ich eine globale Funktion, die dies für mich erledigt:
Dies erweitert die Objekte tief in ein neues Objekt und ermöglicht eine variable Anzahl von Objekten als Parameter. Auf diese Weise können Sie Folgendes tun:
quelle
Ich habe ein Modul dafür erstellt, wenn Sie Stile basierend auf einer Bedingung wie dieser hinzufügen möchten:
https://www.npmjs.com/package/react-native-multiple-styles
quelle
Möglichkeiten des Inline-Stylings:
quelle