i denne blog gennemgår vi to React grundlæggende emner, herunder Standard rekvisitter og typechecking med Proptyper. Rekvisitter er objekter, der overføres fra en komponent til en anden (for eksempel fra en forældrekomponent til en barnekomponent). Hvis vi uanset grund undlader at videregive rekvisitterne til barnekomponenten, kan vi bruge standardrekvisitter i barnekomponenten for at forhindre, at appen går i stykker. Prøven app til denne blog er vist nedenfor og github repo er her.

prøveappen har en hoved – / forældrekomponent kaldet app.js (vist nedenfor) og de to brugerdefinerede komponenter; emne.JS og besked.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 rekvisitter

i en klasse komponent standard rekvisitter kan enten defineres inden for klassen som statisk objekt som vist nedenfor,

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

eller uden for klassen som vist nedenfor

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

i funktionel komponent kan standardværdierne introduceres ved hjælp af standardargumenter syntaks som så

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

Vi kan også bruge Message.defaultProps={} vist ovenfor.

Proptyper

Proptyper er en React rekvisitter validering funktion . Med PropTypes kan vi specificere datatypen af rekvisitter som vist nedenfor. for eksempel kan vi videregive navn, sport og sport rekvisitter til en forekomst af Meddelelseskomponenten; <Message name={"Eric} age={10} sport={"Soccer"} /> . navn, sport er både streng datatype og alder prop er et tal datatype. Når der er angivet en forkert værdi for en prop, vises en fejl i konsollen

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

i React kan en komponent have en, mange eller ingen børn. Dette barn kan være et React-element eller en streng eller en anden datatype. Med PropTypes.element kan vi specificere, at kun et enkelt barn kan overføres til en komponent som børn. Desuden skal det enkelte barn være et React-element; Det kan være et almindeligt element (React-elementer, der repræsenterer DOM-tags) eller en anden React-komponent, men det kan ikke være en streng. Med PropTypes.element vises der ingen advarsel på konsollen, hvis der ikke sendes noget React-element. Men med PropTypes.element.isRequired vi kræver et enkelt barn er bestået; Message.propTypes={children: PropTypes.element.isRequired}

men før vi bruger PropTypes.element vi skal bruge this.props.children i Meddelelseskomponenten. this.props.children — en speciel prop, der automatisk overføres til komponenter

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

oversigt

Vi har vist, hvordan du bruger standard rekvisitter, og hvordan du gør typechecking på React rekvisitter med Proptyper. Vi har også diskuteret en særlig React prop- this.props.children