کلاس کامپوننت در React

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 به سراغ کلاس کامپوننت در React می رویم. در این بخش به شما یک نمای کلی از نحوه استفاده کلاس کامپوننت (Class components) در React همراه با چندین مثال را می دهیم.

با اضافه شدن Hooks، کامپوننت‌های Function اکنون تقریباً معادل کلاس کامپوننت هستند. تفاوت ها به قدری جزئی هستند که احتمالاً هرگز نیازی به استفاده از کلاس کامپوننت در React نخواهید داشت.

React Components

کامپوننت ها بیت های کد مستقل و قابل استفاده مجدد هستند. آنها همان هدف توابع جاوا اسکریپت را انجام می دهند، اما به صورت مجزا کار می کنند و HTML را از طریق یک تابع render() برمی گردانند.

کامپوننت ها در دو نوع Class Components و Function Component ها هستند که در این فصل با کلاس کامپوننت آشنا می شوید.

یک کامپوننت کلاس ایجاد کنید. هنگام ایجاد کامپوننت React، نام کامپوننت باید با یک حرف بزرگ شروع شود.

کامپوننت باید شامل عبارت extensions React.Component باشد، این عبارت از React.Component ارث بری می کند و به کامپوننت شما دسترسی به توابع React.Component را می دهد.

کامپوننت همچنین به یک متد render نیاز دارد که خروجی HTML را برمی گرداند. در مثال زیر h2 اجرا شده و متن داخل آن، نمایش داده می شود.

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));

اکنون برنامه React شما دارای کامپوننتی به نام Car است که عنصر <h2> را برمی گرداند.

برای استفاده از این کامپوننت در برنامه خود، از سینتکس مشابه HTML معمولی استفاده کنید: <Car />

سازنده کامپوننت

اگر یک تابع constructor در کامپوننت شما وجود داشته باشد، زمانی که کامپوننت شروع به کار کرد، این تابع فراخوانی می شود و کد داخل آن اجرا می شود.

در React، ویژگی های کامپوننت باید در یک شی به نام State نگه داشته شود.

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));

Props در کلاس

Props مانند آرگومان های تابع هستند و شما آنها را به کامپوننت ارسال می کنید.

اگر کامپوننت شما یک تابع سازنده دارد، props باید همیشه از طریق متد super به سازنده و همچنین React.Component ارسال شود.

در بخش بعدی در مورد props بیشتر خواهید آموخت.

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>,document.getElementById('root'));

کامپوننت در کامپوننت

ما میتوانیم یک کلاس کامپوننت را، در یک کلاس دیگر فراخوانی کنیم.

همان طور که در زیر مشاهده میکنید ابتدا کلاس Car را ایجاد کرده ایم و سپس آن را در کلاس Garage فراخوانی کرده ایم.

import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div> <h1>Who lives in my Garage?</h1> <Car /> </div> );}}
ReactDOM.render(<Garage />, document.getElementById('root'));

کامپوننت در فایل ها

می توانید یک کامپوننت را در یک فایل مجزا ایجاد و سپس آن را فراخوانی کنید.

برای انجام این کار، یک فایل جدید با پسوند js ایجاد کنید و کد را داخل آن قرار دهید.

توجه داشته باشید که باید عبارت export default Car; در انتهای فایل Car قرار داده شود و همچنین در هر جا که نیاز به استفاده از آن بود، فایل باید در بالا import شود در مثال بالا می توانید نحوه ایمپورت کردن را بیاموزید.

موارد دیگری نیز وجود دارد که در ادامه آموزش توضیح خواهیم داد.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید