ReactJS - Présentation des accessoires

La principale différence entre l'état et les accessoires est que propssont immuables. C'est pourquoi le composant conteneur doit définir l'état qui peut être mis à jour et modifié, tandis que les composants enfants doivent uniquement transmettre les données de l'état à l'aide d'accessoires.

Utiliser des accessoires

Lorsque nous avons besoin de données immuables dans notre composant, nous pouvons simplement ajouter des accessoires à reactDOM.render() fonction dans main.js et utilisez-le dans notre composant.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Cela produira le résultat suivant.

Accessoires par défaut

Vous pouvez également définir les valeurs de propriété par défaut directement sur le constructeur du composant au lieu de l'ajouter au reactDom.render() élément.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

La sortie est la même qu'avant.

État et accessoires

L'exemple suivant montre comment combiner stateet accessoires dans votre application. Nous définissons l'état dans notre composant parent et le transmettons à l'arborescence des composants en utilisantprops. À l'intérieur derender fonction, nous définissons headerProp et contentProp utilisé dans les composants enfants.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

Le résultat sera à nouveau le même que dans les deux exemples précédents, la seule chose qui soit différente est la source de nos données, qui provient maintenant à l'origine du state. Lorsque nous voulons le mettre à jour, il suffit de mettre à jour l'état et tous les composants enfants seront mis à jour. Plus d'informations à ce sujet dans le chapitre Événements.