نحوه‌ی پاس دادن props به فرزندان از طریق this.props.children در React

mohsen•1 سال قبل
ارسال شده در
react

فرض کنید که ما کامپوننتی به نام Parent داریم که یکسری Child بعنوان فرزند می گیرد و می خواهیم پراپی را از طریق کامپوننت Parent به هر فرزند پاس کنیم:

      <Parent>
  <Child value="1" />
  <Child value="2" />
</Parent>

پاس دادن Props به فرزندان

یک روش رایج برای پاس دادن props به فرزندان این است که از تابع React.Children.map به‌همراه React.cloneElement استفاده کنیم. این روش به شما اجازه می‌دهد تا به هر یک از فرزندان props جدیدی اضافه کنید. برای این کار، می‌توانید به شکل زیر عمل کنید:

      function Parent({ children }) {
  function doSomething(value) {
    console.log(value);
  }

  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { doSomething });  
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
}

function Child({ onClick }) {
  return <div onClick={onClick}>Click me!</div>;
}

در این کد، doSomething به هر Child پاس داده می‌شود و می‌توان آن را در داخل Child استفاده کرد.

استفاده از render props

یک روش دیگر برای پاس دادن props به فرزندان استفاده از render props است. در این رویکرد، فرزندان به عنوان تابعی تعریف می‌شوند که می‌تواند پارامترهایی را پذیرش کند و در نتیجه فرزندان واقعی را باز می‌گرداند:

      function Parent({ children }) {
  function doSomething(value) {
    console.log(value);
  }

  return <div>{children(doSomething)}</div>;
}

function App() {
  return (
    <Parent>
      {(doSomething) => (
        <>
          <Child value="1" doSomething={doSomething} />
          <Child value="2" doSomething={doSomething} />
        </>
      )}
    </Parent>
  );
}

نکات مهم

  • اگر تنها یک فرزند وجود داشته باشد، می‌توانید بدون استفاده از یک عنصر wrapper، کامپوننت را به شکل مستقیم رندر کنید.
  • به‌خاطر داشته باشید که اگر از React.cloneElement استفاده می‌کنید، باید مطمئن شوید که فرزندان معتبر هستند تا از بروز خطا جلوگیری شود.
  • علاوه بر این، هنگام استفاده از React.Children.map، به راحتی می‌توانید به هر یک از فرزندان props مختلفی پاس دهید، که می‌تواند باعث تمایز در منطق رندر شوند.

این رویکردها به شما این امکان را می‌دهند که کامپوننت‌های مقیاس‌پذیر و قابل انعطاف بسازید که به راحتی می‌توانند از props مشترک استفاده کنند و در عین حال منطق خود را حفظ کنند.

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!