ფუნქცური კომპონენტის გარდაქმნა კლასურ კომპონენტად რეაქთში

რეაქტში, როგორც დოკუმენტაციაში ვკითხულობთ შეგვიძლია გვქონდეს 2 სახის კომპონენტი, ესენია ფუნქციური კომპონენტები და კლასური ტიპის კომპონენტები, წინა გაკვეთილებიდან ჩვენ ვისწავლეთ თუ როგორ იქმნება ფუნქციური კომპონენტები, ხოლო ამ გაკვეთილში ვისწავლით, თუ როგორ შეიძლება გამოვიყენოთ ან დავაკონვერტიროთ ფუნქციური კომპონენტი კლასური ტიპის კომპონენტად.

იმისთვის, რომ ჩვენი წინა გაკვეთილის კოდი, რომელიც მოცემულია ფუნქციური კომპონენტის სახით, დავაკონვერტიროთ კლასური ტიპის კომპონენტად საჭიროა რამდენიმე გზის გავლა, სანამ კოვერტაციას დავიწყებთ ვნახოთ რეაქთის წინა გაკვეთილი კოდი

ფუნქციური კომპონენტის ნიმუში:

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

function Welcome(props) {
	console.log(props);
	return <h1>Hello, {props.name} {props.lastName}</h1>;
}

const element = <Welcome lastName="Nickolson" name="Sara" />;

root.render(element);

მაშ ასე, მოდი დავიწყოთ რეაქთის ფუნქციური კომპონენტის კლასურ კომპონენტად გარდაქმნა

პირველი რიგში წავშალო Welcome ფუნქცია, რომლის წაშლის შემდგომაც დავწიყოთ გარდაქმნა

1. შევქმნათ ES6-ის კლასი Welcome სახელით, რომელიც დაუექსთენდედდება React.Component-ს
2. კლასში შევქმნათ 1 მარტივი მეთოდი სახელად render()
3. props-ის მაგივრად გამოვიყენოთ this.props render() მეთოდში
4. დავაბრუნოთ სასურველი HTML-ის კოდი

კლასური კომპონენტის ნიმუში რეაქთში:

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

class Welcome extends React.Component {
	render() {
		return (
			<h1>Hello, {this.props.name} {this.props.lastName}</h1>
		)
	}
}

const element = <Welcome lastName="Nickolson" name="Sara" />;

root.render(element);

თუ თქვენს ლოკალურ მანქანაში გატესტავთ ზემოთ მოცემულ კოდებს დაინახავთ, რომ ორივე ერთნაირად იმუშავებს და არანაირი სხვაობა არ იქნება