سفارشی کردن سبک والدین از یک Child Component در React

Summarize this content to 400 words in Persian Lang
ممکن است سناریوهایی وجود داشته باشد که در آن یک مؤلفه فرزند باید سبک عنصر والد خود را سفارشی کند. با استفاده از رفر می توانید به آن برسید. ref به سادگی تابعی در React است که به شما امکان می دهد به عنصر DOM هنگامی که به DOM متصل است دسترسی داشته باشید.

توجه به این نکته مهم است که تغییر مستقیم سبک یک مؤلفه والد از فرزند از طریق CSS استاندارد امکان پذیر نیست. در حالی که :has() انتخابگر CSS می‌تواند به صورت مشروط والدین را بر اساس فرزند استایل کند، همچنان باید از خود مؤلفه والد اعمال شود، نه فرزند.

در اینجا یک مثال عملی وجود دارد که در آن یک مؤلفه فرزند بالشتک را از عنصر اصلی خود حذف می کند:

const Child = () => {
return (
<div
ref={(childElement) => {
if (childElement) {
childElement.parentElement!.style.padding = “0”; // Remove padding from the parent
}
}}
>
I am the child
div>
);
};

const Parent = () => {
return (
<div style={{ padding: “20px”, border: “1px solid black” }}>
<Child />
div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این چگونه کار می کند؟

چیست ref?

ref یک React prop است که به شما اجازه می دهد تا به یک عنصر DOM پس از نصب (به DOM اضافه شده) دسترسی پیدا کنید.

چه زمانی اجرا می شود؟

را ref تابع زمانی که عنصر DOM متصل است اجرا می شود.

این رویکرد سریع است و برای موارد استفاده خاص که در آن شما نیاز به ایجاد تغییرات جزئی در سبک‌های والدین از مؤلفه فرزند دارید، کار می‌کند.

const Child = () => {
  return (
    <div
      ref={(childElement) => {
        if (childElement) {
          childElement.parentElement!.style.padding = "0"; // Remove padding from the parent
        }
      }}
    >
      I am the child
    div>
  );
};

const Parent = () => {
  return (
    <div style={{ padding: "20px", border: "1px solid black" }}>
      <Child />
    div>
  );
};