i den här bloggen granskar vi två React grundläggande ämnen inklusive Standard rekvisita och typechecking med PropTypes. Rekvisita är objekt som skickas från en komponent till en annan (till exempel från en överordnad komponent till en underordnad komponent). Om vi inte skickar rekvisita till barnkomponenten, kan vi använda standard rekvisita i barnkomponenten för att hålla appen från att bryta. Exempelappen för den här bloggen visas nedan och github repo är här.

exempelappen har en huvud – / moderkomponent som heter App.js (visas nedan) och de två användardefinierade komponenter; ämne.js och meddelande.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;

standard rekvisita

i en klass komponent Standard rekvisita kan antingen definiera inom klassen som statiskt objekt som visas nedan,

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

eller utanför klassen som visas nedan

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

i funktionell komponent kan standardvärdena introduceras med standardargumentsyntax som så

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

Vi kan också använda Message.defaultProps={} som visas ovan.

PropTypes

PropTypes är en React props valideringsfunktion . Med PropTypes kan vi ange datatypen för rekvisita som visas nedan. till exempel kan vi skicka namn, sport och sport rekvisita till en instans av Meddelandekomponenten; <Message name={"Eric} age={10} sport={"Soccer"} /> . namn, sport är både strängdatatyp och åldersprop är en taldatatyp. När ett felaktigt värde anges för en prop visas ett fel i konsolen

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

i React kan en komponent ha ETT, många eller inga barn. Detta barn kan vara en React element eller sträng eller annan datatyp. Med PropTypes.element kan vi ange att endast ett enda barn kan skickas till en komponent som barn. Dessutom måste det enskilda barnet vara ett React-element; det kan vara ett vanligt JSX-element (React-element som representerar DOM-taggar) eller en annan React-komponent, men det kan inte vara en sträng. Med PropTypes.element visas ingen varning på konsolen om inget React-element passeras. Men med PropTypes.element.isRequired kräver vi att ett enda barn passeras; Message.propTypes={children: PropTypes.element.isRequired}

men innan vi använder PropTypes.element måste vi använda this.props.children I Meddelandekomponenten. this.props.children — en speciell prop som skickas till komponenter automatiskt

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

sammanfattning

Vi har visat hur man använder standard rekvisita och hur man gör typechecking på React rekvisita med PropTypes. Vi har också diskuterat en speciell React prop – this.props.children