Anpassen des übergeordneten Stils einer untergeordneten Komponente in React

Es kann Szenarien geben, in denen eine untergeordnete Komponente den Stil ihres übergeordneten Elements anpassen muss. Sie können dies mithilfe einer Referenz erreichen. Ein Ref ist einfach eine Funktion in React, die Ihnen den Zugriff auf ein DOM-Element ermöglicht, wenn es an das DOM angehängt ist.

Es ist wichtig zu beachten, dass das direkte Ändern des Stils einer übergeordneten Komponente von einer untergeordneten Komponente über Standard-CSS nicht möglich ist. Während der CSS-Selektor :has() ein übergeordnetes Element basierend auf einem untergeordneten Element bedingt formatieren kann, muss es dennoch von der übergeordneten Komponente selbst und nicht vom untergeordneten Element angewendet werden.

---

Hier ist ein praktisches Beispiel, bei dem eine untergeordnete Komponente den Abstand von ihrem übergeordneten Element entfernt:

const Child = () => {
  zurückkehren (
    <div
      ref={(childElement) => {
        if (childElement) {
          childElement.parentElement!.style.padding = "0"; // Abstand vom übergeordneten Element entfernen
        }
      }}
    >
      Ich bin das Kind
    </div>
  );
};

const Parent = () => {
  zurückkehren (
    <div>




<hr>

<h3>
  
  
  Wie funktioniert das?
</h3>

<ol>
<li>
<p><strong>Was ist Ref?</strong></p>

<ul>
<li>
ref ist eine React-Requisite, die Ihnen den Zugriff auf ein DOM-Element ermöglicht, nachdem es gemountet (zum DOM hinzugefügt) wurde.</li>
</ul>
</li>
<li>
<p><strong>Wann läuft es?</strong></p>

<ul>
<li>Die Ref-Funktion wird ausgeführt, wenn das DOM-Element angehängt ist.</li>
</ul>
</li>
</ol>


<hr>

<p>Dieser Ansatz ist schnell und funktioniert für bestimmte Anwendungsfälle, in denen Sie geringfügige Anpassungen an übergeordneten Stilen einer untergeordneten Komponente vornehmen müssen.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonAnpassen des übergeordneten Stils einer untergeordneten Komponente in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!