Dans ce blog, nous passons en revue deux sujets fondamentaux de React, notamment les accessoires par défaut et la vérification de type avec des PropTypes. Les props sont des objets passés d’un composant à un autre (par exemple d’un composant parent à un composant enfant). Si, pour une raison quelconque, nous ne parvenons pas à transmettre les accessoires au composant enfant, nous pouvons utiliser les accessoires par défaut dans le composant enfant pour empêcher l’application de se casser. L’exemple d’application pour ce blog est montré ci-dessous et le dépôt github est ici.

L’exemple d’application a un composant principal / parent appelé App.js (illustré ci-dessous) et les deux composants définis par l’utilisateur; Sujet.js et message.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;

Accessoires par défaut

dans un composant de classe les accessoires par défaut peuvent être définis dans la classe comme objet statique comme indiqué ci-dessous,

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

ou en dehors de la classe comme indiqué ci-dessous

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

dans le composant fonctionnel, les valeurs par défaut peuvent être introduites en utilisant la syntaxe des arguments par défaut comme

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

Nous pouvons également utiliser Message.defaultProps={} ci-dessus.

Les PropTypes

Les PropTypes sont une fonction de validation des props React. Avec les PropTypes, nous pouvons spécifier le type de données des props comme indiqué ci-dessous. par exemple, nous pouvons transmettre le nom, le sport et les accessoires de sport à une instance du composant Message ; <Message name={"Eric} age={10} sport={"Soccer"} />. nom, sport sont à la fois un type de données de chaîne et l’accessoire d’âge est un type de données de nombre. Lorsqu’une valeur incorrecte est fournie pour une prop, une erreur s’affiche dans la console

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

Dans React, un composant peut avoir un, plusieurs ou aucun enfant. Cet enfant peut être un élément React ou une chaîne ou un autre type de données. Avec PropTypes.element, nous pouvons spécifier qu’un seul enfant peut être transmis à un composant en tant qu’enfant. De plus, l’enfant unique doit être un élément React ; il peut s’agir d’un élément JSX régulier (éléments React qui représentent des balises DOM) ou d’un autre composant React, mais il ne peut pas s’agir d’une chaîne. Avec PropTypes.element, aucun avertissement n’est affiché sur la console si aucun élément React n’est transmis. Cependant, avec PropTypes.element.isRequired, nous avons besoin qu’un seul enfant soit passé; Message.propTypes={children: PropTypes.element.isRequired}

Mais avant d’utiliser PropTypes.element, nous devons utiliser this.props.children dans le composant Message. this.props.children — un accessoire spécial qui est transmis automatiquement aux composants

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

Résumé

Nous avons montré comment utiliser les accessoires par défaut et comment effectuer une vérification de type sur les accessoires React avec des PropTypes. Nous avons également discuté d’une prop React spéciale –this.props.children