از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در این بایت ما نگاهی به مفهوم پاس کردن وسایل به آن خواهیم داشت this.props.children در React. این موضوع بخش مهمی از کار با معماری مبتنی بر کامپوننت React است. در پایان این بایت، باید بدانید که چگونه می‌توانید به اجزای کودک وصل کنید و چرا در توسعه React تمرین خوبی است.
Props در React
در React، کامپوننت ها از طریق با یکدیگر ارتباط برقرار می کنند props (مخفف «خواص»). Props روش صحبت اجزا با یکدیگر است. آنها انتقال مقادیر را از یک جزء والد به یک جزء فرزند امکان پذیر می کنند.
در اینجا یک مثال ساده آورده شده است:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return <Welcome name="Sarah" />;
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
در اینجا ما در حال عبور از یک name تکیه گاه از App جزء به Welcome جزء.
چرا Props را به this.props.children منتقل کنید؟
اکنون، ممکن است از خود بپرسید که چرا ما می‌خواهیم وسایل را به آنها منتقل کنیم this.props.children? این معمولاً زمانی مفید است که می خواهید اجزای قابل استفاده مجدد و جدا شده ایجاد کنید.
در یک برنامه React، کامپوننت هایی را خواهید یافت که باید نسبت به فرزندانشان ناشناس باشند. به این معنی که آنها نیازی به دانستن جزئیات در مورد اجزای فرزند خود ندارند. اینجاست که this.props.children جلو می آید.
this.props.children به شما این امکان را می دهد که اجزایی را به عنوان داده به اجزای دیگر منتقل کنید، و یک “شاخه” ایجاد کنید که در آن اجزای فرزند می توانند وارد شوند.
توجه داشته باشید: this.props.children خود یک تکیه گاه نیست، اما یک ویژگی است this.props که React برای هر کامپوننت ارائه می کند.
چگونه Props را به this.props.children منتقل کنیم
پاس دادن وسایل به this.props.children کمی سخت تر از پاس های معمولی است. ما نمی‌توانیم مانند موارد معمولی به طور مستقیم وسایل را پاس کنیم. در عوض، ما باید از روش هایی مانند React.Children.map و React.cloneElement.
در اینجا یک مثال است:
class Parent extends React.Component {
render() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, { parentState: this.state });
});
}
}
در این مثال، ما از React.Children.map برای تکرار روی هر کودک در this.props.children. سپس، استفاده می کنیم React.cloneElement برای ایجاد یک کپی از هر عنصر فرزند، و انتقال وضعیت والد به عنوان پشتوانه به کودک. عنصر را کپی می کنیم تا یک نسخه جدید با آن ایجاد کنیم اضافی یا بازنویسی شده لوازم جانبی
به این ترتیب، اجزای فرزند حالت والدین را دریافت می کنند بدون اینکه والدین نیازی به دانستن جزئیات در مورد فرزندان داشته باشند. این باعث می شود اجزای ما قابل استفاده مجدد و جدا شوند.
مثال
اکنون که ایده انجام این کار را پوشش دادیم، بیایید یک مثال عملی ببینیم. ما یک را ایجاد خواهیم کرد Parent کامپوننت و لوازم جانبی را به مؤلفه های فرزند خود منتقل می کند.
import React, { Component } from 'react';
class Parent extends Component {
render() {
const childrenWithProps = React.Children.map(this.props.children, child => {
return React.cloneElement(child, { parentData: 'Hello from Parent' });
});
return <div>{childrenWithProps}</div>;
}
}
class Child extends Component {
render() {
return <p>{this.props.parentData}</p>;
}
}
export default function App() {
return (
<Parent>
<Child />
<Child />
<Child />
</Parent>
);
}
در این مثال، Parent کامپوننت در حال شبیه سازی فرزندان خود و پاس دادن یک تکیه گاه است، parentData، به هر یک. هر یک Child سپس کامپوننت این prop را رندر می کند. «سلام از والدین» را سه بار خواهید دید روی را page.
با استفاده از Context API و React.cloneElement
گاهی اوقات، ممکن است لازم باشد وسایل را از چندین سطح از کودکان عبور دهید. این می تواند به سرعت خسته کننده شود و منجر به چیزی شود که به عنوان “حفاری پایه” شناخته می شود. برای جلوگیری از این، می توانید از Context API استفاده کنید.
Context API به شما این امکان را می دهد که مقادیر را بین مؤلفه ها به اشتراک بگذارید بدون اینکه نیازی به عبور صریح پایه از هر سطح درخت باشد.
در اینجا روش استفاده از Context API و React.cloneElement برای دادن وسایل به کودکانی که عمیقاً لانه کرده اند:
import React, { Component, createContext } from 'react';
const ParentDataContext = createContext();
class Parent extends Component {
render() {
const childrenWithProps = React.Children.map(this.props.children, child => {
return React.cloneElement(child, { parentData: 'Hello from Parent' });
});
return (
<ParentDataContext.Provider value={this.props.parentData}>
{childrenWithProps}
</ParentDataContext.Provider>
);
}
}
class Child extends Component {
static contextType = ParentDataContext;
render() {
return <p>{this.context}</p>;
}
}
export default function App() {
return (
<Parent>
<Child />
<Child />
<Child />
</Parent>
);
}
در این مثال، ما یک زمینه ایجاد کرده ایم، ParentDataContext. مولفه والد این زمینه را با یک مقدار فراهم می کند، parentDataو سپس هر جزء Child می تواند به این مقدار از متن دسترسی پیدا کند.
نتیجه
در این بایت، ما به روش ارسال props به آن نگاه کردیم this.props.children در React. ما دیده ایم که چگونه React.cloneElement می توان از آن برای شبیه سازی اجزای کودک و ارسال وسایل به آنها استفاده کرد. ما همچنین استفاده از Context API را برای جلوگیری از “حفاری پایه” و ارسال وسایل به کودکان عمیقا تو در تو توضیح داده ایم.
منتشر شده در 1402-12-29 07:31:03
