ReactJS - Component API

W tym rozdziale wyjaśnimy API komponentu React. Omówimy trzy metody:setState(), forceUpdate i ReactDOM.findDOMNode(). W nowych klasach ES6 musimy to ręcznie powiązać. Użyjemythis.method.bind(this) w przykładach.

Ustaw stan

setState()metoda służy do aktualizacji stanu komponentu. Ta metoda nie zastąpi stanu, a jedynie doda zmiany do stanu pierwotnego.

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;

Zaczęliśmy od pustej tablicy. Za każdym razem, gdy klikniemy przycisk, stan zostanie zaktualizowany. Jeśli klikniemy pięć razy, otrzymamy następujący wynik.

Wymusić aktualizację

Czasami możemy chcieć ręcznie zaktualizować komponent. Można to osiągnąć za pomocąforceUpdate() metoda.

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;

Ustawiamy losową liczbę, która będzie aktualizowana po każdym kliknięciu przycisku.

Znajdź węzeł Dom

Do manipulacji DOM możemy użyć ReactDOM.findDOMNode()metoda. Najpierw musimy zaimportowaćreact-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;

Kolor myDiv element zmienia się na zielony po kliknięciu przycisku.

Note - Od aktualizacji 0.14 większość starszych metod API komponentów jest przestarzała lub usunięta, aby dostosować się do ES6.