React Props

En React, les Props (propriétés) sont un mécanisme permettant de transmettre des données d'un composant parent à un composant enfant. Les Props sont en lecture seule ; les composants enfants ne peuvent pas les modifier directement. À la place, le composant parent doit les gérer et les mettre à jour.

La principale différence entre state et props estpropsLes Props sont immuables, tandis que le state peut changer en fonction des interactions de l'utilisateur. C'est pourquoi certains composants conteneurs doivent définir un state pour mettre à jour et modifier les données. Les composants enfants ne peuvent transmettre des données que via les props.

Utilisation des props

Syntaxe pour passer des props :

<ComponentName propName={propValue} />

L'exemple suivant montre comment utiliser des props dans un composant :

Exemple React

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Example"/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Essayez-le »

Dans l'exemple, l'attribut name est obtenu via props.name.

Props par défaut

Vous pouvez définir des valeurs par défaut pour les props en utilisant la propriété defaultProps de la classe du composant, comme montré dans l'exemple :

Exemple React

class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Example' }; const element = <HelloMessage/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Essayez-le »

Props multiples

Vous pouvez passer plusieurs propriétés à un composant enfant.

Exemple

const UserCard = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Âge: {props.age}</p>
      <p>Localisation: {props.location}</p>
    </div>
  );
};

const App = () => {
  return (
    <UserCard name="Alice" age={25} location="New York" />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

propTypes Validation

propTypes est un outil fourni par React pour la vérification des types des props des composants.

Vous pouvez utiliser la bibliothèque prop-types pour effectuer une vérification de type sur les props des composants.

En React, propTypes est défini comme une propriété statique d'un composant. Tout d'abord, vous devez installer le paquet prop-types :

npm install prop-types

Ensuite, importez prop-types dans votre fichier de composant et définissez la propriété propTypes. Voici un exemple :

Exemple

import PropTypes from 'prop-types';

const Greeting = (props) => {
  return <h1>Bonjour, {props.name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      {/* <Greeting /> // Cette ligne provoquera un avertissement dans la console car name est requis */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Passer des fonctions de rappel en tant que props

Vous pouvez passer des fonctions en tant que props à des composants enfants, et les composants enfants peuvent appeler ces fonctions pour communiquer avec le composant parent.

Exemple

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  handleMessage = (msg) => {
    this.setState({ message: msg });
  };

  render() {
    return (
      <div>
        <ChildComponent onMessage={this.handleMessage} />
        <p>Message de l'enfant: {this.state.message}</p>
      </div>
    );
  }
}

const ChildComponent = (props) => {
  const sendMessage = () => {
    props.onMessage('Bonjour du composant enfant !');
  };

  return (
    <div>
      <button onClick={sendMessage}>Envoyer le message</button>
    </div>
  );
};

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

Déstructuration des props

Dans les composants fonctionnels, vous pouvez simplifier le code en déstructurant les props.

Exemple

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

ReactDOM.render(<App />, document.getElementById('root'));

Résumé

  • Passage et utilisation des props: Le composant parent transmet les données au composant enfant, et le composant enfant viapropsreçoit.
  • Props par défaut: UtilisezdefaultPropspour définir les valeurs par défaut des propriétés du composant.
  • Validation des PropTypes: Utilisezprop-typesbibliothèque pour effectuer la vérification de type sur les props.
  • Passage de fonctions de rappel: Le composant parent peut passer des fonctions comme props aux composants enfants pour permettre la communication entre composants.
  • Déstructuration des props: Déstructurez les props dans les composants fonctionnels pour simplifier le code.

État et props

L'exemple suivant montre comment utiliser l'état et les props ensemble dans une application. Nous pouvons définir l'état dans le composant parent et le transmettre au composant enfant via les props du composant enfant. Dans la fonction render, nous définissons name et site pour obtenir les données transmises par le composant parent.

Exemple React

class WebSite extends React.Component { constructor() { super(); this.state = { name: "Example", site: "https://www.example.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <WebSite /> );

Essayez-le »

Validation des props

React.PropTypes, après React v15.5, a été déplacé vers laprop-typesbibliothèque.

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" type="application/javascript"></script>

La validation des props utilisepropTypes, ce qui garantit que les composants de notre application sont utilisés correctement. React.PropTypes fournit de nombreux validateurs pour vérifier si les données entrantes sont valides. Lorsque des données invalides sont transmises aux props, la console JavaScript émettra un avertissement.

L'exemple suivant crée un composant Mytitle. La prop title est requise et doit être une chaîne de caractères. Les types non-chaînes sont automatiquement convertis en chaînes de caractères :

Exemple React 16.4

var title = "Example"; // var title = 123; class MyTitle extends React.Component { render() { return ( <h1>Hello, {this.props.title}</h1> ); } } MyTitle.propTypes = { title: PropTypes.string }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Essayez-le »

Exemple React 15.4

var title = "Example"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Essayez-le »

Bien sûr, nous pouvons en introduire davantagePropTypesvalidateurs et comment les utiliser. Voici quelquesPropTypesdescriptions de validateurs couramment utilisées :

Types de données de base

  • PropTypes.string: Chaîne
  • PropTypes.number: Number
  • PropTypes.boolean: Boolean
  • PropTypes.object: Object
  • PropTypes.array: Tableau
  • PropTypes.func: Function
  • PropTypes.symbol：Symbol

Types spéciaux

  • PropTypes.node: Tout ce qui peut être rendu : nombres, chaînes de caractères, éléments ou tableaux (y compris ces types)
  • PropTypes.element: Élément React
  • PropTypes.instanceOf(Class): Une instance d'une classe

Types combinés

  • PropTypes.oneOf(['option1', 'option2']): Type énuméré, la valeur doit être l'une des options fournies
  • PropTypes.oneOfType([PropTypes.string, PropTypes.number]): L'un de plusieurs types
  • PropTypes.arrayOf(PropTypes.number): Un tableau d'un certain type
  • PropTypes.objectOf(PropTypes.number): Un objet constitué d'un certain type
  • PropTypes.shape({ key: PropTypes.string, value: PropTypes.number }): Un objet avec une forme spécifique

Autres

  • PropTypes.any: Tout type
  • PropTypes.exact({ key: PropTypes.string }): Un objet avec des clés spécifiques et aucune clé supplémentaire

Voici quelques extraits de code d'exemple montrant comment utiliser différentsPropTypesvalidateurs :

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired, // Doit être une chaîne de caractères et est requis
    age: PropTypes.number,              // Nombre facultatif
    isAdmin: PropTypes.bool,            // Booléen facultatif
    user: PropTypes.shape({             // Doit être un objet avec une forme spécifique
      name: PropTypes.string,
      email: PropTypes.string
    }),
    items: PropTypes.arrayOf(PropTypes.string), // Doit être un tableau de chaînes de caractères
    callback: PropTypes.func,           // Fonction facultative
    children: PropTypes.node,           // Contenu affichable facultatif
    options: PropTypes.oneOf(['option1', 'option2']), // Doit être l'une des valeurs spécifiques
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        {this.props.age && <p>Âge: {this.props.age}</p>}
        {this.props.isAdmin && <p>Administrateur</p>}
        {this.props.user && (
          <div>
            <p>Nom: {this.props.user.name}</p>
            <p>E-mail: {this.props.user.email}</p>
          </div>
        )}
        {this.props.items && (
          <ul>
            {this.props.items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        )}
        {this.props.callback && (
          <button onClick={this.props.callback}>Cliquez-moi</button>
        )}
        {this.props.children}
        {this.props.options && <p>Option: {this.props.options}</p>}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <MyComponent
    title="Bonjour, monde!"
    age={30}
    isAdmin={true}
    user={{ name: "Jean Dupont", email: "[email protected]" }}
    items={['Élément 1', 'Élément 2', 'Élément 3']}
    callback={() => alert('Bouton cliqué!')}
    options="option1"
  >
    <p>Ceci est un élément enfant</p>
  </MyComponent>
);
Autres extensions