De voorbeeldapp heeft een hoofd – /oudercomponent genaamd app.js (hieronder weergegeven) en de twee door de gebruiker gedefinieerde componenten; onderwerp.js en bericht.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;

Default-Props

in een klasse component default-props kan worden definiëren binnen de klas als statisch object zoals hieronder weergegeven,

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

of buiten de klas, zoals hieronder weergegeven

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

in de functionele component, de standaard waarden kunnen worden ingevoerd met behulp van standaard argumenten syntaxis zoals

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

We kunnen ook gebruik Message.defaultProps={} hierboven weergegeven.

PropTypes

PropTypes zijn een functie voor het valideren van React props . Met PropTypes kunnen we het gegevenstype van props specificeren zoals hieronder getoond. we kunnen bijvoorbeeld naam, sport en sport props doorgeven aan een instantie van de Message component; <Message name={"Eric} age={10} sport={"Soccer"} /> . naam, sport zijn zowel string data type en de leeftijd prop is een nummer data type. Wanneer een onjuiste waarde wordt opgegeven voor een prop, zal een fout worden weergegeven in de console

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

in React, kan een component één, veel of geen kinderen hebben. Dit kind kan een React element of string of ander gegevenstype zijn. Met PropTypes.element kunnen we specificeren dat slechts één kind als kind aan een component kan worden doorgegeven. Bovendien moet het ene kind een React-element zijn; het kan een gewoon JSX-element zijn (React-elementen die DOM-tags vertegenwoordigen) of een ander react-component, maar het kan geen string zijn. Met PropTypes.element, wordt er geen waarschuwing getoond op de console als er geen React element wordt doorgegeven. Echter, met PropTypes.element.isRequired vereisen we dat een enkel kind wordt doorgegeven; Message.propTypes={children: PropTypes.element.isRequired}

maar voordat we PropTypes.element gebruiken, moeten we this.props.children gebruiken in de Berichtcomponent. this.props.children — een speciale prop die automatisch wordt doorgegeven aan componenten

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

samenvatting

we hebben laten zien hoe standaard props te gebruiken en hoe typecontrole uit te voeren op react props met PropTypes. We hebben ook een speciale React prop besproken – this.props.children