ReactでCSSスタイルを動的に変更する2つの方法の詳細な説明

最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します

'react' から React、{ Component、Fragment } をインポートします。
'./style.css' をインポートします。
クラスDemoはComponentを拡張します{
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {
            表示: 真
        }
        this.handleshow = this.handleshow.bind(this)
        this.handlehide = this.handlehide.bind(this)
    }
    与える（） {
        戻る （
            <断片>
                スタイルを変更するためにクラスを動的に追加する*/
                <p className={this.state.display?"active":"active1"}>あなたは私の唯一の人です</p>
                <button onClick={this.handlehide}>クリックして非表示にする</button>
                <button onClick={this.handleshow}>クリックして表示</button>
            </フラグメント>
        ）
    }
    ハンドルショー() {
        this.setState({
            表示:true
        })
    }
    ハンドル非表示() {
        this.setState({
            表示:偽
        })
    }
}
デフォルトのデモをエクスポートします。

CSSコード:

 。アクティブ{
      表示: ブロック;
  }
  .アクティブ1{
    表示: なし;
  }

2番目の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするスタイルを動的に追加する

'react' から React、{ Component、Fragment } をインポートします。
クラスDemoはComponentを拡張します{
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {
            表示2: 真
        }
        this.handleshow2 = this.handleshow2.bind(this)
        this.handlehide2 = this.handlehide2.bind(this)
    }
    与える（） {
        定数ディスプレイ2 = {
            display:this.state.display2 ? 'ブロック' : 'なし'
        }
        戻る （
            <断片>
                 スタイルを変更するには、スタイルを動的に追加します*/
                 <p style={display2}>あなたは私の唯一の人です</p>
                <button onClick={this.handlehide2}>クリックして 2 を非表示にする</button>
                <button onClick={this.handleshow2}>クリックして 2 を表示</button>
            </フラグメント>
        ）
    }
    ハンドルショー2() {
        this.setState({
            表示2:true
        })
    }
    ハンドル非表示2() {
        this.setState({
            表示2:偽
        })
    }
}
デフォルトのデモをエクスポートします。

要約: クラスを使用して CSS スタイルを変更すると、動的に変更される複数の CSS 属性を記述でき、見た目がすっきりします。スタイルを使用して複数の CSS 属性を記述すると、見た目が複雑になります。これらはすべて個人的な意見ですので、不備があれば指摘してください

これで、React で CSS スタイルを動的に変更する 2 つの方法についての説明は終了です。React で CSS スタイルを動的に変更する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: