REACT - Enkel introduktionskomponent, der ikke gengives?

En af de store ting ved React er dets fleksible komponentsystem. Når du først har fået fat i det, kan du opdele din applikation i genanvendelige komponenter og inkludere dem overalt i dit projekt.

Problemet er, at der er et par gotchas, der gør det vanskeligt at arbejde med komponenter for dem, der er nye til at reagere.

Sig for eksempel, at du har følgende komponent mainIntro.js:

const mainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default mainIntro;

Og vil importere det til App.js:

import mainIntro from './components' class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

Men mainIntroindlæses ikke af en eller anden grund. Lad os se nærmere på, hvad der sker.

Navngivning af dine komponenter

For alle, der er fortrolige med objektorienteret programmering, er det almindelig konvention at navngive hver klasse med et stort bogstav. For eksempel kaldes en klasse til at beskrive en person for Personat angive, at det er en klasse.

I React, som bruger JSX i stedet for almindelig JavaScript, angiver det første bogstav i et tag, hvilken slags element det er. Store bogstaver bruges til at specificere React-komponenter, så mainIntroskal i stedet kaldes MainIntro:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Mens filnavnet stadig kan være mainIntro.js, er det også en god ide at bruge det første tegn. Senere når du scanner indholdet af biblioteket, kan du hurtigt vælge, der MainIntro.jsindeholder en komponent.

Nu App.jsskal se sådan ud:

import MainIntro from './components/MainIntro.js'; class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

Hvordan installeres React?

Der er to hovedmåder at bruge React. Først skal du installere og konfigurere det lokalt, sandsynligvis igennem create-react-app. For det andet gennem et CDN.

Du har måske bemærket ovenfor, at kodestykkerne faktisk ikke inkluderer React i projektet med import React from'react';. Dette kaster en fejl, hvis du arbejder med React lokalt.

Men hvis du bruger et CDN til at indlæse React, er det tilgængeligt globalt, og du behøver ikke importere det som ovenfor.

Pilfunktioner

Før du dykker ned i React, er det vigtigt at have en solid forståelse af JavaScript, især ES6-syntaks.

Se MainIntrokomponenten igen:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Hvis du ser nøje på den første linje, vil du bemærke en syntaksfejl:

const MainIntro = props => (

Du skriver en funktionel komponent, som typisk er enkle JavaScript-funktioner, der kan acceptere rekvisitter som et argument og returnere gyldig JSX. Selvfølgelig skal syntaksen være korrekt for at den kan vende tilbage korrekt.

Pilfunktioner kan skrives på mange måder, men i dette eksempel skal du tilføje de krøllede seler ( {}) og sørge for at returnere JSX fra selve komponenten:

const MainIntro = props => { return ( //... rest of the code ); }

Efter implementering af alle ovennævnte ændringer skal din komponent nu gengives korrekt.

Selvom den primære skelnen mellem funktionelle og klassekomponenter i React plejede at være, at førstnævnte var "statsløs", mens sidstnævnte var "statefull", har React Hooks sløret linjerne imellem dem. Læs mere om begge komponenter i denne oversigt og dette dybere dykk i funktionelle komponenter med React Hooks.