i denne bloggen gjennomgår vi To React grunnleggende emner, inkludert standard rekvisitter og typechecking med Proptyper. Rekvisitter er objekter som sendes fra en komponent til en annen (for eksempel fra en overordnet komponent til en barnekomponent). Hvis uansett grunn vi ikke klarer å passere rekvisitter til barnet komponent, kan vi bruke standard rekvisitter i barnet komponent for å holde app fra å bryte. Prøven app for denne bloggen er vist nedenfor og github repo er her.

eksempelapp gjengir bildet ovenforfigcaption>

eksempelappen har en hoved / overordnet komponent kalt app.js (vist nedenfor) og de to brukerdefinerte komponentene; Emne.js Og Budskap.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 i klassen som statisk objekt som vist nedenfor,

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

eller utenfor klassen som vist nedenfor

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

i funksjonell komponent kan standardverdiene innføres ved hjelp av standardargumenter syntaks som så

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

vi kan også bruke Message.defaultProps={} vist ovenfor.

Proptyper

Proptyper er En React props validering funksjon . Med PropTypes kan vi spesifisere datatypen rekvisitter som vist nedenfor. for eksempel kan vi sende navn, sport og sport rekvisitter til En forekomst Av Meldingskomponenten; <Message name={"Eric} age={10} sport={"Soccer"} />. navn, sport er både streng datatype og alder prop er et tall datatype. Når en feil verdi er oppgitt for en prop, vises en feil i konsollen

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

I React kan en komponent ha en, mange eller ingen barn. Dette barnet kan Være Et React-element eller en streng eller en annen datatype. Med PropTypes.element kan vi spesifisere at bare et enkelt barn kan sendes til en komponent som barn. Videre må det enkelte barnet Være Et React-element; det kan være et vanlig JSX-element (React-elementer som representerer DOM-koder) eller en Annen React-komponent, men det kan ikke være en streng. Med PropTypes.element vises ingen advarsel på konsollen hvis Ingen React-element er bestått. Men med PropTypes.element.isRequired krever vi at et enkelt barn er bestått; Message.propTypes={children: PropTypes.element.isRequired}

Men før vi bruker PropTypes.element må vi bruke this.props.children I Meldingskomponenten. this.props.children — en spesiell prop som sendes til komponenter automatisk

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

Sammendrag

Vi har vist hvordan du bruker standard rekvisitter og hvordan du gjør typechecking På React rekvisitter med Proptyper. Vi har også diskutert en Spesiell React prop- this.props.children