Menyesuaikan Gaya Ibu Bapa daripada Komponen Kanak-kanak dalam React

Mungkin terdapat senario di mana komponen kanak-kanak perlu menyesuaikan gaya elemen induknya. Anda boleh mencapainya menggunakan rujukan. Rujukan hanyalah fungsi dalam React yang membolehkan anda mengakses elemen DOM apabila ia dilampirkan pada DOM.

Adalah penting untuk ambil perhatian bahawa mengubah suai secara langsung gaya komponen induk daripada kanak-kanak tidak boleh dilakukan melalui CSS standard. Walaupun pemilih CSS :has() boleh menggayakan ibu bapa berdasarkan kanak-kanak secara bersyarat, ia mesti masih digunakan daripada komponen induk itu sendiri, bukan anak.

---

Berikut ialah contoh praktikal di mana komponen kanak-kanak mengeluarkan padding daripada elemen induknya:

const Anak = () => {
  kembali (
    <div
      ref={(childElement) => {
        jika (childElement) {
          childElement.parentElement!.style.padding = "0"; // Keluarkan padding daripada induk
        }
      }}
    >
      Saya adalah anak
    </div>
  );
};

const Ibu bapa = () => {
  kembali (
    <div>




<hr>

<h3>
  
  
  Bagaimana Ini Berfungsi?
</h3>

<ol>
<li>
<p><strong>Apakah ref?</strong></p>

<ul>
<li>
ref ialah prop React yang membolehkan anda mengakses elemen DOM selepas ia dipasang (ditambahkan pada DOM).</li>
</ul>
</li>
<li>
<p><strong>Bilakah Ia Berlari?</strong></p>

<ul>
<li>Fungsi ref berjalan apabila elemen DOM dilampirkan.</li>
</ul>
</li>
</ol>


<hr>

<p>Pendekatan ini pantas dan berfungsi untuk kes penggunaan tertentu di mana anda perlu membuat pelarasan kecil kepada gaya ibu bapa daripada komponen kanak-kanak.</p>


          

            
        

Atas ialah kandungan terperinci Menyesuaikan Gaya Ibu Bapa daripada Komponen Kanak-kanak dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!