React でスタイルを動的に変更する方法

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

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

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

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

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

React で動的に変更する一般的な方法要素のスタイル ref を使用して要素のスタイルを変更する方法と、状態の変更を動的に制御する方法の 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 のポインタを変更する必要があります。要素のスタイルを変更します。状態変化の動的制御による (2 つの方法)

方法 1

ロジック コード内のフラグ表示をデフォルトで true に設定し、表示の値を に変更します。対応する条件によって 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 と同じです。ロジック コード内のフラグ表示をデフォルトで true に設定します。対応する条件に応じて、display の値を true または false に変更し、対応するスタイル名を DOM.className 属性に割り当てると、対応するスタイルでスタイルが記述されます。 DOM ですが、js では次のようになります:

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

異なる DOM # の表示・非表示変換を実現する方法 第三に、これは厳密な意味でのスタイルの変更ではなく、単に DOM の表示・非表示・表示を変更するために使用されます。

概要:

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

# を使用してください。 ##変更されたスタイルがあまり多くない場合は、1 と 2 を使用してください
• ##2 つのコンポーネント (表示と非表示) 間の切り替えだけの場合は、3
• を使用するのが最も便利です。 #React スタイルの競合問題
• #反応スキャフォールディングにはすでに sass 設定があるため、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 スキャフォールディングにおける規約、通常の CSS とは区別)

2. 導入して使用します。

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

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

スタイルを通じてオブジェクト内のスタイル名にアクセスしますスタイルを設定するオブジェクト

<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的内容</div>

Principle

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

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

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

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

Format

クラス名を維持したい場合は、xxx.module.scss 内で

: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 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

コンポーネントの使用法

import styles from './index.module.scss'
const 组件 = () => {
  return (
    {/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}
      

      {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
        

          登录  
          登录  
      
            

    
  )
}

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

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