Comment modifier dynamiquement le style dans React?: 1. Ajoutez une référence à l'élément dont le style doit être modifié, avec une syntaxe telle que "

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

Comment modifier dynamiquement le style en réaction ?

Environ trois fa?ons pour React de modifier dynamiquement les styles d'éléments

React pour modifier dynamiquement les styles d'éléments

Il existe deux manières courantes pour React de modifier dynamiquement les styles d'éléments?: utiliser ref et modifier le style des éléments via le contr?le dynamique de changements d'état

1. Utilisez ref pour modifier dynamiquement le style

Ajoutez une référence sur l'élément qui doit être modifié

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

Ajoutez React.createRef() dans le constructeur

this.manage = React.createRef()

Utilisez-le dans le code logique

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

Si le code Si cela ne peut pas être reconnu, vous devez changer le pointeur de this via let that = this

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

2. Modifier le style de l'élément grace au contr?le dynamique des changements d'état (deux manières)

Méthode 1

Définir dans le code logique Un indicateur affiche par défaut la valeur true ou false selon les conditions correspondantes, puis attribuez le nom de style correspondant à l'attribut className du DOM. Le style est écrit dans le style correspondant. Par exemple?:

 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 }>

Méthode 2

Le principe de la méthode 2 est le même que celui de la méthode 1. Définissez l'affichage d'un bit d'indicateur dans le code logique pour qu'il soit vrai. par défaut, changez la valeur d'affichage en true ou false via les conditions correspondantes, puis modifiez le nom de style correspondant. Le nom de style est attribué à l'attribut className du DOM et le style est écrit dans le style correspondant. La différence est que le. le code logique n'est pas jugé dans le DOM, mais en js, comme suit?:

3 Par Utiliser le code JS (opérateur ternaire) dans le DOM

pour réaliser l'affichage et le masquage de la conversion des différents DOM

. La méthode 3 ne change pas le style au sens strict, elle sert juste à changer l'affichage, masquer et afficher les composants correspondants

Pour résumer :

Si les styles modifiés sont de plus en plus complexes , utilisez 2

• Si les styles modifiés ne sont pas trop nombreux, utilisez 1 et 2
• S'il ne s'agit que d'un commutateur de deux composants (affiché avec Caché) Il est plus pratique d'utiliser 3
Problème de conflit de style de réaction

Il existe déjà une configuration sass dans l'échafaudage de réaction, il vous suffit donc d'installer le package de dépendances sass, et vous pouvez utiliser sass directement

Installez le package de dépendances sass

npm i sass -D

- Remplacez index.css par index. scss

- Importez le fichier index.scss

Remarque : Si scss est utilisé, vous devez ajouter ~ lors de l'utilisation du chemin absolu de l'image dans scss~

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

css -Style privatisation

css modules-Basic utilisation

étapes

1. Changez le nom du fichier de style. De xx.scss -> xx.module.scss (convention dans l'échafaudage React, distinguée du CSS ordinaire)

2.

Importez le fichier de style dans le composant (notez la syntaxe)

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

Accédez au nom du style dans l'objet via l'objet styles pour définir le style

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

Le nom de la classe CSS est défini dans index.module.scss Nom de la classe.

Exemple

Définir le style index.module.css

.root {font-size: 100px;}

Utiliser les styles

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

Principe

CS S Modules par automatiquement Nom de classe Compléter le nom de classe pour garantir l'unicité du nom de classe, évitant ainsi le problème de conflit de style

Notes sur le module CSS

Il est préférable d'utiliser la dénomination en casse chameau pour les noms de classe, car le nom de classe final générera un attribut de styles

cssModules- Conserver le nom de la classe

Format

Dans xxx.module.scss, si vous souhaitez conserver le nom de la classe, vous pouvez utiliser le format?:

:global(.classname)

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

remplacer le style des composants tiers

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

modules CSS-Best Practice

- Le n?ud racine de chaque composant utilise un nom de classe sous la forme de CSSModules (nom de classe de l'élément racine : root )

- Tous les autres n?uds enfants utilisent des noms de classe CSS ordinaires?: utilisez le composant

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

dans global

index.module.scss

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

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

          登錄  
          登錄  
      
            

    
  )
}

Apprentissage recommandé?: "Tutoriel vidéo React"