tässä blogissa käydään läpi kaksi React-perusaihetta, kuten oletusasetukset rekvisiitta ja typechecking PropTypes. Rekvisiitta on objekti, joka siirtyy komponentista toiseen (esimerkiksi vanhemman komponentista lapsen komponenttiin). Jos jostain syystä emme anna rekvisiittaa lapsen komponenttiin, Voimme käyttää oletuksena rekvisiittaa lapsen komponenttiin, jotta sovellus ei rikkoudu. Tämän blogin esimerkkisovellus näkyy alla ja github repo on täällä.

näytesovelluksessa on pää/kantakomponentti nimeltään app.js (alla) ja kaksi käyttäjän määrittelemää osaa; aihe.js ja viesti.js

import React from "react";
import "./App.css";
import Message from "./components/Message";
import Subject from "./components/Subject";function App() {
return (
<div className="App">
<Message name={"Paul"} age={12} sport={"Soccer"}>
<Subject subjects={} />
</Message>
</div>
);
}
export default App;

Default Props

luokan komponentin default props voidaan joko määritellä luokan sisällä staattiseksi objektiksi kuten alla,

class Message extends Component {
static defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}
render() {
return (
<div>
</div>
)
}
}

tai luokan ulkopuolella kuten alla

class Message extends Component {
render() {
return (
<div>
</div>
)
}
}
Message.defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}

funktionaalisessa komponentissa oletusarvot voidaan esittää oletusargumenttien syntaksilla kuten niin

function Message({name="Eric",age"=10, sport ="Soccer"}){
return(
<div>
</div>
)
}

voidaan käyttää myös Message.defaultProps={} yllä.

Proptyypit

Proptyypit ovat React-rekvisiittaominaisuus . Kanssa PropTypes voimme määrittää tietotyyppi rekvisiitta kuten alla. esimerkiksi voimme siirtää nimen, urheilun ja sport rekvisiitan sanomakomponentin ilmentymälle; <Message name={"Eric} age={10} sport={"Soccer"} /> . nimi, urheilu ovat molemmat merkkijono tietotyyppi ja ikä prop on numero tietotyyppi. Kun rekvisiitalle annetaan virheellinen arvo, virhe näkyy konsolissa

Message.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
sport: PropTypes.string,
};

Reactissa, komponentilla voi olla yksi, monta tai ei yhtään lasta. Tämä lapsi voi olla React elementti tai merkkijono tai muu tietotyyppi. Kun PropTypes.element voidaan määritellä, että vain yksi lapsi voi siirtyä komponenttiin lapsena. Lisäksi yksittäisen lapsen on oltava React-elementti; se voi olla säännöllinen JSX-Elementti (React elements that represent Dom tageja) tai muu React-komponentti, mutta se ei voi olla merkkijono. Kun PropTypes.element, konsolissa ei näy varoitusta, jos React-elementtiä ei ohiteta. Kuitenkin PropTypes.element.isRequired edellytämme yhden lapsen läpimenoa; Message.propTypes={children: PropTypes.element.isRequired}

mutta ennen kuin käytämme PropTypes.element on käytettävä this.props.children Viestiosassa. this.props.children — erityinen rekvisiitta, joka siirtyy komponentteihin automaattisesti

class Message extends React.Component {
render() {
let name = this.props.name;
let age = this.props.age;
let sport = this.props.sport;
let children = this.props.children;
return (
<div>
<h3>
My name is {name}, I am {age} old and I love playing {sport}{" "}
</h3>
<div>{children}</div>
</div>
);
}
}

Yhteenveto

olemme näyttäneet, miten käytetään oletusrekvisiittaa ja miten tehdään typechecking React props with PropTypes. Olemme myös keskustelleet erityisestä Reaktioehdosta – this.props.children