Ich mag das Inline-CSS-Muster in React sehr und habe beschlossen, es zu verwenden.
Sie können jedoch keine :hover
und ähnliche Selektoren verwenden. Was ist der beste Weg, um Highlight-on-Hover bei Verwendung von Inline-CSS-Stilen zu implementieren?
Ein Vorschlag von #reactjs ist, eine Clickable
Komponente zu haben und sie wie folgt zu verwenden:
<Clickable>
<Link />
</Clickable>
Der Clickable
hat einen hovered
Zustand und gibt ihn als Requisiten an den Link weiter. Allerdings ist die Clickable
(wie ich es implementiert) wickelt die Link
in einem div
so dass es einstellen onMouseEnter
und onMouseLeave
darauf. Dies macht die Dinge allerdings etwas kompliziert (z. B. span
verpackt in ein div
Verhalten anders als span
).
Gibt es einen einfacheren Weg?
onMouseEnter
undonMouseLeave
. In Bezug auf die genaue Umsetzung liegt es ganz bei Ihnen. Um Ihr spezielles Beispiel zu betrachten, warum machen Sie den<Clickable/>
Wrapper nicht zu einemspan
?Antworten:
Ich bin in der gleichen Situation. Mag das Muster, das Styling in den Komponenten beizubehalten, aber die Schwebezustände scheinen die letzte Hürde zu sein.
Ich habe ein Mixin geschrieben, das Sie zu Ihrer Komponente hinzufügen können, die Schwebezustände benötigt. Dieses Mixin fügt
hovered
dem Status Ihrer Komponente eine neue Eigenschaft hinzu. Es wird festgelegt,true
ob der Benutzer den Mauszeiger über den Haupt-DOM-Knoten der Komponente bewegt, und zurückgesetzt,false
wenn der Benutzer das Element verlässt.Jetzt können Sie in Ihrer Komponenten-Renderfunktion Folgendes tun:
Jedes Mal, wenn sich der Status des
hovered
Status ändert, wird die Komponente erneut gerendert.Ich habe auch ein Sandbox-Repo dafür erstellt, mit dem ich einige dieser Muster selbst teste. Probieren Sie es aus, wenn Sie ein Beispiel für meine Implementierung sehen möchten.
https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin
quelle
Ich denke, onMouseEnter und onMouseLeave sind die richtigen Wege, aber ich sehe keine Notwendigkeit für eine zusätzliche Wrapper-Komponente. So habe ich es implementiert:
Sie können dann den Schwebezustand (wahr / falsch) verwenden, um den Stil des Links zu ändern.
quelle
:hover
aber nicht:focus
onFocus
Ereignis; so dass Sie die gleiche Sache für tun könnten ,:focus
wie:hover
, es sei denn statt der NotwendigkeitonMouseEnter
undonMouseLeave
Sie würden nur brauchenonFocus
Spät zum Feiern, aber mit Lösung. Sie können "&" verwenden, um Stile für das schwebende n-te Kind usw. zu definieren:
quelle
Sie können Radium verwenden - es ist ein Open Source-Tool für Inline-Stile mit ReactJS. Es werden genau die Selektoren hinzugefügt, die Sie benötigen. Sehr beliebt, probieren Sie es aus - Radium auf npm
quelle
module.exports = React.createClass({ displayName: 'App',})
module.exports = Radium(React.createClass({ displayName: 'App',}))
oder die Klasse einem Wert zuweisen und den@Radium
Dekorator darüber hinzufügen , wie in den Dokumenten erwähnt, github.com/FormidableLabs/radium#usageDie vollständige CSS-Unterstützung ist genau der Grund für diese große Anzahl von CSSinJS-Bibliotheken. Um dies effizient zu tun, müssen Sie tatsächlich CSS und keine Inline-Stile generieren. Auch Inline-Stile reagieren in einem größeren System viel langsamer. Haftungsausschluss - Ich pflege JSS .
quelle
Made Style It - teilweise - aus diesem Grund (andere sind nicht einverstanden mit der Implementierung anderer Bibliotheken / Syntax- und Inline-Stile, da das Präfixieren von Eigenschaftswerten nicht unterstützt wird). Glauben Sie, wir sollten in der Lage sein, einfach CSS in JavaScript zu schreiben und vollständig in sich geschlossene Komponenten HTML-CSS-JS zu haben. Mit ES5 / ES6-Template-Strings können wir jetzt und es kann auch schön sein! :) :)
npm install style-it --save
Funktionssyntax ( JSFIDDLE )
JSX-Syntax ( JSFIDDLE )
quelle
Zusätzlich zu Jonathans Antwort sind hier die Ereignisse aufgeführt, die den Fokus und die aktiven Zustände abdecken, und eine Verwendung
onMouseOver
anstelle von,onMouseEnter
da letztere nicht sprudelt, wenn Sie untergeordnete Elemente innerhalb des Ziels haben, auf das das Ereignis angewendet wird.quelle
Hier ist meine Lösung mit React Hooks. Es kombiniert den Spread-Operator und den ternären Operator.
style.js
Button.js
quelle
In Bezug auf gestylte Komponenten und React-Router v4 können Sie dies tun:
quelle
Dies kann ein guter Hack sein, um einen Inline-Stil in einer Reaktionskomponente zu haben (und auch die Hover-CSS-Funktion zu verwenden):
quelle
Kasse Typestyle wenn Sie React with Typescript verwenden.
Unten finden Sie einen Beispielcode für: hover
quelle
Alternativ können Sie CSS-Module verwenden und zusätzlich CSS-Module reagieren für Klassennamen Mapping.
Auf diese Weise können Sie Ihre Stile wie folgt importieren und normales CSS verwenden, das lokal für Ihre Komponenten gilt:
Hier ist ein Beispiel für Webpack-CSS-Module
quelle
:hover
Stile zur Laufzeit nicht wie mit Radium oder einer anderenonMouseOver
basierten Lösung ändernonMouseOver und onMouseLeave mit setState schienen mir zunächst ein wenig Overhead zu sein - aber so wie Reagieren funktioniert, scheint es mir die einfachste und sauberste Lösung zu sein.
Das Rendern einer themenbezogenen CSS-Serverseite ist beispielsweise auch eine gute Lösung und hält die Reaktionskomponenten sauberer.
Wenn Sie keine dynamischen Stile an Elemente anhängen müssen (z. B. für ein Thema), sollten Sie überhaupt keine Inline-Stile verwenden, sondern CSS-Klassen.
Dies ist eine traditionelle HTML / CSS-Regel, um HTML / JSX sauber und einfach zu halten.
quelle
Der einfache Weg ist die Verwendung eines ternären Operators
quelle
Bei Verwendung der Haken:
quelle
Ich verwende hierfür eine ziemlich hackige Lösung in einer meiner jüngsten Anwendungen, die für meine Zwecke geeignet ist, und finde sie schneller als das Schreiben von benutzerdefinierten Funktionen für Schwebeeinstellungen in Vanilla JS (obwohl ich erkenne, dass dies in den meisten Umgebungen möglicherweise keine bewährte Methode ist ..) Also, falls Sie noch interessiert sind, hier geht's.
Ich erstelle ein übergeordnetes Element, nur um die Inline-Javascript-Stile zu speichern, und dann ein untergeordnetes Element mit einem Klassennamen oder einer ID, an die sich mein CSS-Stylesheet anschließt, und schreibe den Hover-Stil in meine dedizierte CSS-Datei. Dies funktioniert, weil das detailliertere untergeordnete Element die Inline-js-Stile über die Vererbung empfängt, die Hover-Stile jedoch von der CSS-Datei überschrieben werden.
Im Grunde genommen existiert meine eigentliche CSS-Datei nur zum Halten von Hover-Effekten, sonst nichts. Dies macht es ziemlich übersichtlich und einfach zu verwalten und ermöglicht es mir, das Schwerheben in meinen Inline-React-Komponentenstilen durchzuführen.
Hier ist ein Beispiel:
Beachten Sie, dass für den Inline-Stil "Kind" keine Eigenschaft "Farbe" festgelegt ist. In diesem Fall würde dies nicht funktionieren, da der Inline-Stil Vorrang vor meinem Stylesheet hat.
quelle
Ich bin mir nicht 100% sicher, ob dies die Antwort ist, aber es ist der Trick, mit dem ich den CSS simuliere: Hover-Effekt mit Farben und Bildern inline.
CSS:
Beispiel: https://codepen.io/roryfn/pen/dxyYqj?editors=0011
quelle
Wo schwebbar definiert ist als:
quelle