Comment changer le style CSS en réaction

Comment changer le style CSS dans React : 1. Ajoutez dynamiquement une classe avec un code tel que "handleshow() {this.setState({display:true})}..."; 2. Ajoutez dynamiquement un style avec un code tel que "handleshow() {this.setState({display:true})}..."; comme "la classe Demo étend le composant {...}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React18, ordinateur Dell G3.

Comment changer le style CSS dans React ? ?

Deux façons de changer dynamiquement les styles CSS dans React

La première : ajouter dynamiquement une classe, cliquez sur le bouton pour afficher et masquer le texte en tant que démo

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;

code CSS :

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

La seconde : dynamiquement ajoutez un style, utilisez le bouton de clic pour afficher et masquer le texte sous forme de démo

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;

Résumé : utilisez la classe pour changer le style CSS, vous pouvez écrire plusieurs attributs CSS à changement dynamique, cela n'a pas l'air encombré, mais si vous utilisez le style pour écrire, si vous écrivez plusieurs attributs CSS, cela semblera compliqué. Ce sont toutes des opinions personnelles, veuillez signaler toute lacune

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!