ReactJS - API de composant

Dans ce chapitre, nous expliquerons l'API du composant React. Nous discuterons de trois méthodes:setState(), forceUpdate et ReactDOM.findDOMNode(). Dans les nouvelles classes ES6, nous devons le lier manuellement. Nous utiliseronsthis.method.bind(this) dans les exemples.

Définir l'état

setState()est utilisée pour mettre à jour l'état du composant. Cette méthode ne remplacera pas l'état, mais ajoutera uniquement des modifications à l'état d'origine.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Nous avons commencé avec un tableau vide. Chaque fois que nous cliquons sur le bouton, l'état sera mis à jour. Si nous cliquons cinq fois, nous obtiendrons la sortie suivante.

Forcer la mise à jour

Parfois, nous pouvons vouloir mettre à jour le composant manuellement. Ceci peut être réalisé en utilisant leforceUpdate() méthode.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Nous définissons un nombre aléatoire qui sera mis à jour chaque fois que vous cliquerez sur le bouton.

Trouver le nœud Dom

Pour la manipulation DOM, nous pouvons utiliser ReactDOM.findDOMNode()méthode. Nous devons d'abord importerreact-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

La couleur de myDiv L'élément passe au vert, une fois que le bouton est cliqué.

Note - Depuis la mise à jour 0.14, la plupart des anciennes méthodes d'API des composants sont obsolètes ou supprimées pour s'adapter à ES6.