a mintaalkalmazásnak van egy app nevű fő / szülő összetevője.js (lásd alább) és a két felhasználó által definiált összetevő; tárgy.js és üzenet.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;

alapértelmezett kellékek

egy osztálykomponensben az alapértelmezett kellékek meghatározhatók az osztályon belül statikus objektumként az alábbiak szerint,

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

vagy az osztályon kívül az alábbiak szerint

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

a funkcionális komponensben az alapértelmezett értékek az alapértelmezett argumentumok szintaxisával vezethetők be

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

használhatjuk a fent látható Message.defaultProps={} is.

PropTypes

a PropTypes egy React props érvényesítési funkció . A PropTypes segítségével megadhatjuk a kellékek adattípusát az alábbiak szerint. például átadhatjuk a nevet, a sportot és a sport kellékeket az Üzenetkomponens egy példányának; <Message name={"Eric} age={10} sport={"Soccer"} /> . a név, a sport mind karakterlánc adattípus, mind az age prop szám adattípus. Ha helytelen értéket ad meg egy prop számára, hiba jelenik meg a konzolban

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

a React-ben egy komponensnek lehet egy, sok vagy nincs gyermeke. Ez a gyermek lehet React elem vagy karakterlánc vagy más adattípus. A PropTypes.element megadhatjuk, hogy csak egy gyermek adható át egy komponensnek gyermekként. Ezenkívül az egyetlen gyermeknek React elemnek kell lennie; lehet szabályos JSX elem (reagáló elemek, amelyek Dom címkéket képviselnek) vagy más React komponens, de nem lehet string. A PropTypes.element esetén a konzolon nem jelenik meg figyelmeztetés, ha nem adnak át React elemet. Azonban PropTypes.element.isRequired szükségünk van egy gyermek átadására; Message.propTypes={children: PropTypes.element.isRequired}

de mielőtt használni PropTypes.elementkell használni this.props.children az üzenet összetevő. this.props.children — egy speciális prop, amely automatikusan átkerül a komponensekhez

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

Összegzés

megmutattuk, hogyan kell használni az alapértelmezett kellékeket, és hogyan kell elvégezni a Typechecking-et a React kellékeken PropTypes-szel. Megvitattunk egy speciális React prop-ot is – this.props.children