Komponenty React

Komponenty są jak funkcje, które zwracają elementy HTML.

Komponenty React

Komponenty są niezależnymi i wielokrotnego użytku bitami kodu.Służą do tego samego celu co funkcje JavaScript, ale działają w izolacji i zwracają HTML poprzez funkcję render().

Komponenty występują w dwóch typach, komponenty klasy i komponenty funkcji, w tym tutorialu skupimy się na komponentach klasy.

Tworzenie komponentu klasy

Podczas tworzenia komponentu React, nazwa komponentu musi zaczynać się od dużej litery.

Komponent musi zawierać deklarację extends React.Component, ta deklaracja tworzy dziedziczenie do React.Component, i daje Twojemu komponentowi dostęp do funkcji React.Component.

Komponent wymaga również metody render(), ta metoda zwraca HTML.

class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}

Teraz Twoja aplikacja React ma komponent o nazwie Samochód, który zwraca element <h2>.

Aby użyć tego komponentu w swojej aplikacji, użyj podobnej składni jak normalny HTML:<Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Utwórz komponent Function

Tutaj znajduje się ten sam przykład co powyżej, ale utworzony przy użyciu komponentu Function zamiast.

Komponent funkcyjny również zwraca HTML i zachowuje się podobnie jak komponent klasowy, ale komponenty klasowe mają pewne dodatki i będą preferowane w tym poradniku.

function Car() { return <h2>Hi, I am also a Car!</h2>;}

Po raz kolejny twoja aplikacja React ma komponent Car.

Odwołaj się do komponentu Car jak do normalnego HTML (z wyjątkiem React, komponenty muszą zaczynać się od dużej litery):

ReactDOM.render(<Car />, document.getElementById('root'));

Konstruktor komponentu

Jeśli w twoim komponencie znajduje się funkcja constructor(), funkcja ta zostanie wywołana, gdy komponent zostanie zainicjowany.

Funkcja konstruktora to miejsce, w którym inicjujesz właściwości komponentu.

W React właściwości komponentu powinny być przechowywane w obiekcie o nazwiestate.

Więcej o state dowiesz się w dalszej części tego poradnika.

Funkcja konstruktora jest również miejscem, w którym honorujesz dziedziczenie komponentu nadrzędnego poprzez dołączenie instrukcji super(), która wykonuje funkcję konstruktora komponentu nadrzędnego, a Twój komponent ma dostęp do wszystkich funkcji komponentu nadrzędnego (React.Component).

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; }}

Użyj właściwości color w funkcji render():

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Props

Innym sposobem obsługi właściwości komponentów jest użycie props.

Propy są jak argumenty funkcji, a Ty przesyłasz je do komponentu jako atrybuty.

Więcej o props dowiesz się w następnym rozdziale.

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Komponenty w komponentach

Możemy odwoływać się do komponentów wewnątrz innych komponentów:

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'));

Komponenty w plikach

React polega na ponownym wykorzystaniu kodu, a mądrym rozwiązaniem może być umieszczenie niektórych komponentów w oddzielnych plikach.

Aby to zrobić, utwórz nowy plik z rozszerzeniem .js i umieść w nim kod:

Zauważ, że plik musi zaczynać się od importu Reacta (tak jak poprzednio) i musi kończyć się stwierdzeniem export default Car;.

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

Aby móc korzystać z komponentu Car, należy zaimportować ten plik w swojej aplikacji.

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));