react でスタイルを動的に変更する方法: 1. "

このチュートリアルの動作環(huán)境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応でスタイルを動的に変更するにはどうすればよいですか?

React で要素スタイルを動的に変更する 3 つの方法について

React で要素スタイルを動的に変更する

React で動的に変更する一般的な方法要素のスタイル ref を使用して要素のスタイルを変更する方法と、狀態(tài)の変更を動的に制御する方法の 2 つのタイプがあります。

1. ref を使用してスタイルを動的に変更する

Add ref

## 変更する必要がある要素に #

<div className=&#39;scroll-title clear-fix&#39; ref={ this.manage }>

コンストラクターに React.createRef() を追加します

this.manage = React.createRef()

ロジック コードで使用します

this.manage.current.style.display = 'block'

if コード これが認識できない場合は、let that = this

that.manage.current.style.display = 'block'

2 を通じて this のポインタを変更する必要があります。要素のスタイルを変更します。狀態(tài)変化の動的制御による (2 つの方法)

方法 1

ロジック コード內(nèi)のフラグ表示をデフォルトで true に設(shè)定し、表示の値を に変更します。対応する條件によって true または false を判定し、対応するスタイル名を DOM に割り當てます。 className 屬性、スタイルは対応するスタイルで記述されます。

例:

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = &#39;block&#39;
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }

<div className={this.state.display ? &#39;none&#39; : &#39;scroll-title }>

方法 2

方法 2 の実裝原理は方法 1 と同じです。ロジック コード內(nèi)のフラグ表示をデフォルトで true に設(shè)定します。対応する條件に応じて、display の値を true または false に変更し、対応するスタイル名を DOM.className 屬性に割り當てると、対応するスタイルでスタイルが記述されます。 DOM ですが、js では次のようになります:

3. DOM で JS コード (三項演算子) を使用する

異なる DOM # の表示?非表示変換を?qū)g現(xiàn)する方法 第三に、これは厳密な意味でのスタイルの変更ではなく、単に DOM の表示?非表示?表示を変更するために使用されます。

概要:

変更されたスタイルがより複雑な場合は、2

# を使用してください。 ##変更されたスタイルがあまり多くない場合は、1 と 2 を使用してください
• ##2 つのコンポーネント (表示と非表示) 間の切り替えだけの場合は、3
• を使用するのが最も便利です。 #React スタイルの競合問題
• #反応スキャフォールディングにはすでに sass 設(shè)定があるため、sass 依存関係パッケージをインストールするだけで、sass を直接使用できます

sass をインストールします依存関係パッケージ

npm i sass -D

-index.cssをindex.scssに変更します

-index.scssファイルをインポートします

注: scssがscss で畫像の絶対パスを使用する場合は、~ を追加する必要があります

#

background-image: url(~assets/login.png);

#css スタイルのプライベート化

css モジュール - 基本的な使用法

手順

1. スタイルファイル名を変更します。 xx.scss -> xx.module.scss (React スキャフォールディングにおける規(guī)約、通常の CSS とは區(qū)別)

2. 導(dǎo)入して使用します。

スタイル ファイルをコンポーネントにインポートします (構(gòu)文に注意してください)

import styles from './index.module.scss'

スタイルを通じてオブジェクト內(nèi)のスタイル名にアクセスしますスタイルを設(shè)定するオブジェクト

<div className={styles.css類名}></div>

css クラス名は、index.module.scss で定義されたクラス名です。

• #例

スタイルの定義index.module.css

.root {font-size: 100px;}

# #Use style

import styles from './index.module.css'
<div className={styles.root}>div的內(nèi)容</div>

Principle

CSS モジュールは、クラス名に CSS を自動的に補完することで、クラス名の一意性を保証します。 class name を使用することで、スタイルの競合の問題を回避できます。

css モジュールに関する注意事項

クラス名にはキャメル ケースの名前を使用することをお勧めします。スタイルの屬性を生成します

cssModules-クラス名を維持します

Format

クラス名を維持したい場合は、xxx.module.scss 內(nèi)で

:global(.class name)

/*這樣css modules就不會修改掉類名.a了。等價于寫在 index.css中 */
:global(.a) {   }
 
/* 這樣css modules就不會修改掉類名.a了, 但是 .aa還是會被修改 */
.aa :golbal(.a) { }

サードパーティ コンポーネントのスタイルをオーバーライドする

:global(.ant-btn) {
  color: red !important;
}

## という形式を使用できます。

#css モジュール - ベスト プラクティス

- 各コンポーネントのルート ノードは、CSSModules の形式でクラス名を使用します (ルート要素のクラス名: root )

- その他すべて子ノードは通常の CSS クラス名を使用します: global

index.module.scss

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此處，使用 global 包裹其他子節(jié)點的類名。此時，這些類名就不會被處理，在 JSX 中使用時，就可以用字符串形式的類名
  // 如果不加 :global ，所有類名就必須添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

コンポーネントの使用法

import styles from './index.module.scss'
const 組件 = () => {
  return (
    {/* （1） 根節(jié)點使用 CSSModules 形式的類名（ 根元素的類名： `root` ）*/}
      

      {/* （2） 所有子節(jié)點，都使用普通的 CSS 類名*/}
        

          登錄  
          登錄  
      
            

    
  )
}

推奨される學習: 「react ビデオ チュートリアル 」

以上がReact でスタイルを動的に変更する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。