Die Beispiel-App hat eine Haupt- / übergeordnete Komponente namens App.js (siehe unten) und die beiden benutzerdefinierten Komponenten; Betreff.js und Nachricht.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;

Standardrequisiten

In einer Klassenkomponente können Standardrequisiten entweder innerhalb der Klasse als statisches Objekt definiert werden, wie unten gezeigt,

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

oder außerhalb der Klasse wie unten gezeigt

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

in der Funktionskomponente, die Standardwerte können mit der Standardargumentsyntax wie folgt eingeführt werden

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

Wir können auch Message.defaultProps={} wie oben gezeigt.

PropTypes

PropTypes sind eine React props Validierungsfunktion. Mit PropTypes können wir den Datentyp von Props wie unten gezeigt angeben. zum Beispiel können wir name , sport und sport Requisiten an eine Instanz der Nachrichtenkomponente übergeben; <Message name={"Eric} age={10} sport={"Soccer"} /> . name, sport sind beide String-Datentypen und die age-Requisite ist ein Number-Datentyp. Wenn ein falscher Wert für eine Requisite angegeben wird, wird ein Fehler in der Konsole angezeigt

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

In React kann eine Komponente ein, viele oder kein Kind haben. Dieses Kind kann ein React-Element oder ein String oder ein anderer Datentyp sein. Mit PropTypes.element können wir festlegen, dass nur ein einziges Kind als Kind an eine Komponente übergeben werden kann. Es kann ein reguläres JSX-Element (React-Elemente, die DOM-Tags darstellen) oder eine andere React-Komponente sein, aber es kann keine Zeichenfolge sein. Mit PropTypes.element wird keine Warnung auf der Konsole angezeigt, wenn kein React-Element übergeben wird. Mit PropTypes.element.isRequired benötigen wir jedoch, dass ein einzelnes Kind übergeben wird; Message.propTypes={children: PropTypes.element.isRequired}

Aber bevor wir PropTypes.element verwenden, müssen wir this.props.children in der Nachrichtenkomponente verwenden. this.props.children — eine spezielle Requisite, die automatisch an Komponenten übergeben wird

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

Zusammenfassung

Wir haben gezeigt, wie man Standard-Requisiten verwendet und wie man Typprüfungen für React-Requisiten mit PropTypes durchführt. Wir haben auch eine spezielle React-Requisite besprochen – this.props.children