Detaillierte Erläuterung von zwei Möglichkeiten zum dynamischen Ändern von CSS-Stilen in React

importiere React, {Komponente, Fragment} von „react“;
importiere './style.css';
Klasse Demo erweitert Komponente {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {
            Anzeige: wahr
        }
        dies.handleshow = dies.handleshow.bind(dies)
        dies.handlehide = dies.handlehide.bind(dies)
    }
    rendern() {
        zurückkehren (
            <Fragment>
                {/*Fügen Sie dynamisch eine Klasse hinzu, um den Stil zu ändern*/}
                <p className={this.state.display?"active":"active1"}>Du bist mein Einziger</p>
                <button onClick={this.handlehide}>Klicken zum Ausblenden</button>
                <button onClick={this.handleshow}>Zum Anzeigen klicken</button>
            </Fragment>
        )
    }
    handleshow() {
        dies.setState({
            Anzeige: wahr
        })
    }
    handlehide() {
        dies.setState({
            Anzeige:false
        })
    }
}
Standarddemo exportieren;

 .aktiv{
      Anzeige: Block;
  }
  .aktiv1{
    Anzeige: keine;
  }

importiere React, {Komponente, Fragment} von „react“;
Klasse Demo erweitert Komponente {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {
            Anzeige2: wahr
        }
        dies.handleshow2 = dies.handleshow2.bind(dies)
        dies.handlehide2 = dies.handlehide2.bind(dies)
    }
    rendern() {
        const Anzeige2 = {
            Anzeige:dieser.Zustand.Anzeige2 ? 'Block' : 'keine'
        }
        zurückkehren (
            <Fragment>
                 {/*Fügen Sie dynamisch einen Stil hinzu, um den Stil zu ändern*/}
                 <p style={display2}>Du bist mein Einziger</p>
                <button onClick={this.handlehide2}>Klicken, um 2 auszublenden</button>
                <button onClick={this.handleshow2}>Klicken, um 2 anzuzeigen</button>
            </Fragment>
        )
    }
    handleshow2() {
        dies.setState({
            Anzeige2: wahr
        })
    }
    handlehide2() {
        dies.setState({
            Anzeige2:false
        })
    }
}
Standarddemo exportieren;