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=&#39;scroll-title clear-fix&#39; ref={ this.manage }>

this.manage = React.createRef()

Wenn der Code nicht erkannt werden kann, müssen Sie den Zeiger von this durch let that = this

this.manage.current.style.display = 'block'

2 ändern. Ändern Sie den Stil des Elements durch dynamische Steuerung von Zustandsänderungen (auf zwei Arten).

Methode 1

Setzen 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 = &#39;block&#39;
                } 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 realisieren

Methode 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 verwenden

Reagieren 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

<div className={this.state.display ? &#39;none&#39; : &#39;scroll-title }>

- Ändern Sie index.css in index. scss

• - 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

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 Stildatei in die Komponente (beachten Sie die Syntax)

npm i sass -D

Greifen 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-Modul

Es ist am besten, für Klassennamen die Kamel-Schreibweise zu verwenden, da der endgültige Klassenname ein Attribut von generiert Stile

cssModule – 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 Komponente

import styles from './index.module.css'
<div className={styles.root}>div的内容</div>

in global

index.module.scss

/*这样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!