Reageer komponente
Komponente is soos funksies wat HTML-elemente terugstuur.
Reageer komponente
Komponente is onafhanklike en herbruikbare stukkies kode. Hulle dien dieselfde doel as JavaScript-funksies, maar werk in isolasie en gee HTML terug.
Komponente kom in twee tipes voor, Klaskomponente en Funksiekomponente, in hierdie tutoriaal sal ons op Funksiekomponente konsentreer.
In ouer React-kodebasisse vind u moontlik dat klaskomponente hoofsaaklik gebruik word. Daar word nou voorgestel om Function-komponente te gebruik saam met Hooks, wat in React 16.8 bygevoeg is. Daar is 'n opsionele afdeling oor Klaskomponente vir jou verwysing.
Skep jou eerste komponent
Wanneer 'n React-komponent geskep word, MOET die komponent se naam met 'n hoofletter begin.
Klaskomponent
'n Klaskomponent moet die extends React.Componentstelling insluit. Hierdie stelling skep 'n erfenis na React.Component, en gee jou komponent toegang tot React.Component se funksies.
Die komponent vereis ook 'n render()metode, hierdie metode gee HTML terug.
Voorbeeld
Skep 'n Klaskomponent genaamd Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Funksie komponent
Hier is dieselfde voorbeeld as hierbo, maar geskep deur eerder 'n funksie-komponent te gebruik.
'n Funksie-komponent gee ook HTML terug en tree baie op dieselfde manier op as 'n Klas-komponent, maar Funksie-komponente kan geskryf word deur baie minder kode te gebruik, is makliker om te verstaan, en sal in hierdie tutoriaal verkies word.
Voorbeeld
Skep 'n Funksie-komponent genaamd Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Word gesertifiseer!
$ 95 INSKRYF
Die lewering van 'n komponent
Nou het jou React-toepassing 'n komponent genaamd Car, wat 'n
<h2>element terugstuur.
Om hierdie komponent in jou toepassing te gebruik, gebruik soortgelyke sintaksis as normale HTML:
<Car />
Voorbeeld
Vertoon die Carkomponent in die "root" element:
ReactDOM.render(<Car />, document.getElementById('root'));
Rekwisiete
Komponente kan geslaag word as props, wat staan vir eienskappe.
Rekwisiete is soos funksie-argumente, en jy stuur dit in die komponent as eienskappe.
Jy sal meer oor propsin die volgende hoofstuk leer.
Voorbeeld
Gebruik 'n kenmerk om 'n kleur na die Car-komponent deur te gee, en gebruik dit in die render()-funksie:
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Komponente in komponente
Ons kan verwys na komponente binne ander komponente:
Voorbeeld
Gebruik die Motor-komponent binne die Garage-komponent:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Komponente in lêers
React gaan alles oor die hergebruik van kode, en dit word aanbeveel om u komponente in aparte lêers te verdeel.
Om dit te doen, skep 'n nuwe lêer met 'n .js
lêeruitbreiding en plaas die kode daarin:
Let daarop dat die lêernaam met 'n hoofletter moet begin.
Voorbeeld
Dit is die nuwe lêer, ons het dit "Car.js" genoem:
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Om die Motor-komponent te kan gebruik, moet jy die lêer in jou toepassing invoer.
Voorbeeld
Nou voer ons die "Car.js"-lêer in die toepassing in, en ons kan die
Car
komponent gebruik asof dit hier geskep is.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));