"Props" est un mot-clé spécial dans React. Props est utilisé pour transmettre des données à un composant.

Alors que les accessoires sont utilisés comme une variable dans un composant, nous pouvons arriver avec des objets d'accessoires aux composants.

Prop est un objet JavaScript et à l'intérieur de prop contient le nom et la variable de prop.

Grâce aux accessoires, nous pouvons effectuer un transfert de valeur entre les composants.

Composante 1 :

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

Au lieu d'écrire des accessoires à chaque fois, nous pouvons écrire la propriété à l'intérieur des composants ;
Comme ça;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

Le but de ceci; tout processus de liste, etc. key prop est utilisé pour lister les expressions que nous retournons dans les boucles avec de bonnes performances. L'élément le plus à l'extérieur peut recevoir un accessoire clé.

Types d'accessoires

Avant tout, nous devons importer dans PropTypes.

Lorsque nous envoyons des types aux propriétés que nous définissons, nous définissons des types en dehors du composant.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

Si nous écrivons isRequired à côté après avoir spécifié le type d'accessoires, ce champ ne peut pas être laissé vide.

Nous écrivons isRequired à côté de la propriété dont nous avons spécifié le type ;

name: PropTypes.string.isRequired,

Si nous allons entrer plus d'un type de données pour une propriété, nous utilisons OneOfType.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

Lorsque des données de type d'objet sont saisies, nous utilisons la forme pour définir les types des éléments enfants de l'objet.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

nous pouvons donner une valeur par défaut à un accessoire auquel aucun type n'est attribué. Nous devons le définir à l'exception des autres types.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}