Personnalisation du style parent à partir d'un composant enfant dans React-tutoriel CSS-php.cn

Personnalisation du style parent à partir d'un composant enfant dans React

Patricia Arquette

Libérer： 2024-12-07 09:23:13

original

217 Les gens l'ont consulté

Customizing Parent Style from a Child Component in React

Il peut y avoir des scénarios dans lesquels un composant enfant doit personnaliser le style de son élément parent. Vous pouvez y parvenir en utilisant une réf. Une référence est simplement une fonction dans React qui vous permet d'accéder à un élément du DOM lorsqu'il est attaché au DOM.

Il est important de noter que modifier directement le style d'un composant parent à partir d'un enfant n'est pas possible via le CSS standard. Bien que le sélecteur CSS :has() puisse styliser conditionnellement un parent en fonction d'un enfant, il doit toujours être appliqué à partir du composant parent lui-même, et non de l'enfant.

Voici un exemple pratique où un composant enfant supprime le remplissage de son élément parent :

const Enfant = () => {
  retour (
    <div
      ref={(childElement) => {
        si (enfantElement) {
          childElement.parentElement!.style.padding = "0"; // Supprime le remplissage du parent
        }
      }}
    >
      je suis l'enfant
    </div>
  );
} ;

const Parent = () => {
  retour (
    <div>




<hr>

<h3>
  
  
  Comment cela marche-t-il?
</h3>

<ol>
<li>
<p><strong>Qu'est-ce que la réf ?</strong></p>

<ul>
<li>
ref est un accessoire React qui vous permet d'accéder à un élément DOM après son montage (ajouté au DOM).</li>
</ul>
</li>
<li>
<p><strong>Quand est-ce que ça fonctionne ?</strong></p>

<ul>
<li>La fonction ref s'exécute lorsque l'élément DOM est attaché.</li>
</ul>
</li>
</ol>


<hr>

<p>Cette approche est rapide et fonctionne pour des cas d'utilisation spécifiques où vous devez apporter des ajustements mineurs aux styles parents à partir d'un composant enfant.</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!