반응에서 CSS 스타일을 변경하는 방법

React에서 CSS 스타일을 변경하는 방법: 1. 클래스를 동적으로 추가하여 스타일을 변경합니다. "

"와 같은 코드를 사용하여 스타일을 동적으로 추가하여 스타일을 변경합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React18.0.0 버전, Dell G3 컴퓨터.

반응에서 CSS 스타일을 변경하는 방법은 무엇입니까?

React에서 CSS 스타일을 동적으로 변경하는 두 가지 방법

첫 번째 방법: 동적으로 클래스를 추가하고 버튼을 클릭하여 텍스트를 표시하고 데모로 숨깁니다.

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;

css 코드:

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

두 번째 방법: 동적으로 스타일을 추가하세요. 데모로 텍스트를 표시하거나 숨기려면 클릭 버튼을 사용하세요

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;

요약: 클래스를 사용하여 CSS 스타일을 변경하세요. 동적으로 변경되는 CSS 속성을 여러 개 작성할 수 있습니다. 어수선해 보이지는 않지만 스타일을 사용하면 작성하려면 여러 CSS 속성을 작성하면 복잡해 보입니다. 모두 개인적인 의견이니 부족한 점은 지적해주세요

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 CSS 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!