v tomto blogu se zabýváme dvěma zásadními tématy, včetně výchozích rekvizit a typechecking s PropTypes. Podpěry jsou objekty předávané z jedné komponenty do druhé (například z nadřazené komponenty do podřízené komponenty). Pokud z jakéhokoli důvodu nedokážeme předat rekvizity podřízené komponentě, můžeme použít výchozí rekvizity v podřízené komponentě, abychom zabránili rozbití aplikace. Ukázková aplikace pro tento blog je uvedena níže a repo github je zde.

Ukázka aplikace má hlavní/rodič složku s názvem Aplikace.js (viz níže) a dvě uživatelem definované komponenty; předmět.js a zpráva.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;

Výchozí Rekvizity

ve třídě component default rekvizity mohou být buď definovat v rámci třídy jako statický objekt, jak je uvedeno níže,

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

nebo mimo třídu, jak je uvedeno níže.

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

ve funkční součásti, výchozí hodnoty mohou být zavedeny pomocí výchozí argumenty syntaxe jako

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

můžeme také použít Message.defaultProps={} je uvedeno výše.

PropTypes

PropTypes jsou validační funkce React props. S PropTypes můžeme určit datový typ rekvizit, jak je uvedeno níže. například můžeme předat jméno, sport a sportovní rekvizity instanci komponenty zprávy; <Message name={"Eric} age={10} sport={"Soccer"} /> . název, sport jsou datový typ řetězce a věková rekvizita je datový typ čísla. Když nesprávná hodnota je k dispozici pro rekvizitu, chybě bude zobrazena v konzoli

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

Reagovat, složka může mít jeden, mnoho nebo žádné děti. Toto dítě může být React element nebo řetězec nebo jiný datový typ. Pomocí PropTypes.element můžeme určit, že jako děti může být komponentě předáno pouze jedno dítě. Navíc jediné dítě musí být React element; může to být běžný JSX element (React elements, které reprezentují Dom tagy) nebo jiná React component, ale nemůže to být řetězec. S PropTypes.element se na konzole nezobrazí žádné varování, pokud není předán žádný prvek React. Nicméně s PropTypes.element.isRequired požadujeme, aby bylo předáno jedno dítě; Message.propTypes={children: PropTypes.element.isRequired}

Ale předtím, než budeme používat PropTypes.element musíme použít this.props.children Message component. this.props.children — speciální šroub, který je předán do složek automaticky

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

Shrnutí

Jsme si ukázali, jak použít výchozí rekvizity a jak to udělat typechecking Reagovat na rekvizity s PropTypes. Také jsme diskutovali o speciální React prop – this.props.children