Heim > Artikel > Web-Frontend > So ändern Sie den Stil in React dynamisch
So ändern Sie den Stil in React dynamisch: 1. Fügen Sie ref zu dem Element hinzu, dessen Stil geändert werden muss, mit einer Syntax wie „
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.
Wie ändere ich den Stil in React dynamisch? „Über drei Möglichkeiten für React, Elementstile dynamisch zu ändern“ Statusänderungen
1. Verwenden Sie ref, um den Stil dynamisch zu ändern. Fügen Sie ref für das Element hinzu, das geändert werden muss.
<div className='scroll-title clear-fix' ref={ this.manage }>this.manage = React.createRef()Wenn der Code nicht erkannt werden kann, müssen Sie den Zeiger von this durch let that = thisthis.manage.current.style.display = 'block'2 ändern. Ändern Sie den Stil des Elements durch dynamische Steuerung von Zustandsänderungen (auf zwei Arten).Methode 1Setzen Sie die Anzeige des Flags A im Logikcode standardmäßig auf true. Ändern Sie den Anzeigewert gemäß den entsprechenden Bedingungen in true oder false und weisen Sie dann dem className-Attribut des DOM den entsprechenden Stilnamen zu. Der Stil wird im entsprechenden Stil geschrieben. Zum Beispiel:that.manage.current.style.display = 'block'constructor() { super() this.state = { display: true } } componentDidMount() { window.onscroll = function(event) { if (divTop < -12) { that.setState({ display: false }) that.manage.current.style.display = 'block' } else { that.setState({ display: true }) } } }Methode 2
Das Prinzip von Methode 2 ist das gleiche wie bei Methode 1. Setzen Sie eine Flag-Bit-Anzeige im Logikcode auf wahr Ändern Sie standardmäßig den Anzeigewert über die entsprechenden Bedingungen in true oder false und ändern Sie dann den entsprechenden Stilnamen. Der Stilname wird dem className-Attribut des DOM zugewiesen und der Stil wird im entsprechenden Stil geschrieben Logischer Code wird nicht im DOM, sondern in js beurteilt, wie folgt:3. Durch Verwenden von JS-Code (ternärer Operator) im DOM
, um die Anzeige und Ausblendung verschiedener DOMs zu realisierenMethode 3 ändert den Stil nicht im engeren Sinne, sondern dient lediglich dazu, die Anzeige zu ändern, entsprechende Komponenten auszublenden und anzuzeigen.Zusammenfassend:
Wenn die geänderten Stile immer komplexer werden , verwenden Sie 2Wenn es nicht zu viele geänderte Stile gibt, verwenden Sie 1 und 2
Wenn es sich nur um einen Wechsel zweier Komponenten handelt (angezeigt mit Ausgeblendet) Am bequemsten ist es, 3 zu verwendenReagieren Sie auf Stilkonfliktprobleme
Es gibt bereits eine Sass-Konfiguration im Reaktionsgerüst, Sie müssen also nur das Sass-Abhängigkeitspaket installieren und können Sass direkt verwenden
Installieren Sie das Sass-Abhängigkeitspaket
- Ändern Sie index.css in index. scss
<div className={this.state.display ? 'none' : 'scroll-title }>1. Ändern Sie den Namen der Stildatei. Von xx.scss -> xx.module.scss (Konvention im React-Scaffolding, im Unterschied zu gewöhnlichem CSS) 2.
- - Importieren Sie die Datei index.scss
- Hinweis: Wenn scss verwendet wird, müssen Sie ~ hinzufügen, wenn Sie den absoluten Pfad des Bildes in scss~ verwenden Verwendung
- Schritte
Importieren Sie die Stildatei in die Komponente (beachten Sie die Syntax)
npm i sass -DGreifen Sie über das Stilobjekt auf den Stilnamen im Objekt zu, um den Stil festzulegen.
background-image: url(~assets/login.png);Der Name der CSS-Klasse ist in definiert index.module.scss Klassenname.Beispiel
Stil definieren index.module.css
.root {font-size: 100px;}Stile verwenden
import styles from './index.module.scss'Prinzip.
- CSS-Module werden automatisch durch Klassennamen ergänzt Klassenname, um die Einzigartigkeit des Klassennamens sicherzustellen und so das Problem von Stilkonflikten zu vermeiden
Hinweise zum CSS-ModulEs ist am besten, für Klassennamen die Kamel-Schreibweise zu verwenden, da der endgültige Klassenname ein Attribut von generiert StilecssModule – Klassennamen beibehalten
Format
Wenn Sie in xxx.module.scss den Klassennamen beibehalten möchten, können Sie das Format verwenden::global(.classname)
<div className={styles.css类名}></div>Überschreiben Sie den Stil von Komponenten von Drittanbietern Andere untergeordnete Knoten verwenden gewöhnliche CSS-Klassennamen: Verwenden Sie die Komponentein globalindex.module.scss
import styles from './index.module.css' <div className={styles.root}>div的内容</div>
/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */ :global(.a) { } /* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */ .aa :golbal(.a) { }Empfohlenes Lernen: „Video-Tutorial reagieren“
Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil in React dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!