Bagaimana untuk menukar gaya css dalam bertindak balas

Cara menukar gaya CSS dalam React: 1. Tambah kelas secara dinamik, kod seperti "handleshow() {this.setState({display:true})}..."; gaya, kod Seperti "Demo kelas memanjangkan Komponen{...}".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi react18, komputer Dell G3.

Bagaimana untuk menukar gaya css dalam tindak balas? ?

Dua cara untuk menukar gaya css secara dinamik dalam React

Yang pertama: tambah kelas secara dinamik untuk mengklik butang untuk menunjukkan dan menyembunyikan teks sebagai demo

import React, { Component, Fragment } from 'react';
import './style.css';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display: true
        }
        this.handleshow = this.handleshow.bind(this)
        this.handlehide = this.handlehide.bind(this)
    }
    render() {
        return (
            <Fragment>
                {/*动态添加一个class来改变样式*/}
                <p className={this.state.display?"active":"active1"}>你是我的唯一</p>
                <button onClick={this.handlehide}>点击隐藏</button>
                <button onClick={this.handleshow}>点击显示</button>
            </Fragment>
        )
    }
    handleshow() {
        this.setState({
            display:true
        })
    }
    handlehide() {
        this.setState({
            display:false
        })
    }
}
export default Demo;

kod css:

 .active{
      display: block;
  }
  .active1{
    display: none;
  }

Kedua: Tambahkan gaya secara dinamik untuk mengklik butang untuk memaparkan dan menyembunyikan teks sebagai demo

import React, { Component, Fragment } from 'react';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display2: true
        }
        this.handleshow2 = this.handleshow2.bind(this)
        this.handlehide2 = this.handlehide2.bind(this)
    }
    render() {
        const display2 = {
            display:this.state.display2 ? 'block' : 'none'
        }
        return (
            <Fragment>
                 {/*动态添加一个style来改变样式*/}
                 <p style={display2}>你是我的唯一</p>
                <button onClick={this.handlehide2}>点击隐藏2</button>
                <button onClick={this.handleshow2}>点击显示2</button>
            </Fragment>
        )
    }
    handleshow2() {
        this.setState({
            display2:true
        })
    }
    handlehide2() {
        this.setState({
            display2:false
        })
    }
}
export default Demo;

Ringkasan: Gunakan kelas untuk menukar gaya css , anda boleh Menulis berbilang sifat css yang berubah secara dinamik tidak kelihatan berantakan, tetapi menulis dengan gaya akan kelihatan rumit jika anda menulis berbilang sifat css. Ini semua adalah pendapat peribadi, sila nyatakan sebarang kekurangan

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menukar gaya css dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!