React Basis: elemente de recuzită implicite și Typechecking cu PropTypes.
în acest blog vom revizui două React subiecte fundamentale, inclusiv defaults recuzită și typechecking cu PropTypes. Recuzita sunt obiecte transmise de la o componentă la alta (de exemplu, de la o componentă părinte la o componentă copil). Dacă, indiferent de motiv, nu reușim să trecem recuzita la componenta copil, putem folosi recuzita implicită în componenta copil pentru a împiedica ruperea aplicației. Aplicația de probă pentru acest blog este prezentată mai jos, iar repo-ul github este aici.
exemplu App face imaginea de mai sus
aplicația eșantion are o componentă principală / părinte numită app.js (prezentat mai jos) și cele două componente definite de utilizator; subiect.js și mesaj.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;
elemente de recuzită implicite
într-o componentă de clasă elemente de recuzită implicite pot fi fie defini în cadrul clasei ca obiect static așa cum se arată mai jos,
class Message extends Component {
static defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}
render() {
return (
<div>
</div>
)
}
}
sau în afara clasei așa cum se arată mai jos
class Message extends Component {
render() {
return (
<div>
</div>
)
}
}
Message.defaultProps = {
name: "Eric",
age: 10,
sport: "Soccer",
}
în componenta funcțională, valorile implicite pot fi introduse folosind sintaxa argumentelor implicite ca așa
function Message({name="Eric",age"=10, sport ="Soccer"}){
return(
<div>
</div>
)
}
putem folosi și Message.defaultProps={} prezentat mai sus.
PropTypes
PropTypes sunt o caracteristică de validare react recuzita . Cu PropTypes putem specifica tipul de date de recuzită așa cum se arată mai jos. de exemplu, putem trece nume, sport, și sport recuzită la o instanță a componentei mesaj; <Message name={"Eric} age={10} sport={"Soccer"} /> . nume, sport sunt atât de tip de date șir și vârsta propunerii este un tip de date număr. Când este furnizată o valoare incorectă pentru o recuzită, o eroare va fi afișată în consola
Message.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
sport: PropTypes.string,
};
în React, o componentă poate avea unul, mulți sau nu copii. Acest copil ar putea fi un element de reacție sau șir sau alt tip de date. Cu PropTypes.element putem specifica că doar un singur copil poate fi transmis unei componente ca și copii. Mai mult, copilul unic trebuie să fie un element React; poate fi un element JSX obișnuit (elemente React care reprezintă etichete DOM) sau o altă componentă React, dar nu poate fi un șir. Cu PropTypes.element, nu este afișat niciun avertisment pe consolă dacă nu este trecut niciun element React. Cu toate acestea, cu PropTypes.element.isRequired avem nevoie de un singur copil este trecut; Message.propTypes={children: PropTypes.element.isRequired}
dar înainte de a folosiPropTypes.element trebuie să folosimthis.props.children în componenta mesajului. this.props.children — o recuzită specială care este transmisă automat componentelor
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>
);
}
}
rezumat
am arătat cum să folosim recuzita implicită și cum să verificăm tipul pe recuzita React cu PropTypes. Am discutat, de asemenea, un React special prop – this.props.children