ReactJS — API компонента

В этой главе мы расскажем об API-компоненте React. Мы обсудим три метода: setState (), forceUpdate и ReactDOM.findDOMNode () . В новых классах ES6 мы должны вручную связать это. Мы будем использовать this.method.bind (this) в примерах.

Установить состояние

Метод setState () используется для обновления состояния компонента. Этот метод не заменит состояние, а только добавит изменения в исходное состояние.

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;

Мы начали с пустого массива. Каждый раз, когда мы нажимаем кнопку, состояние будет обновляться. Если мы нажмем пять раз, мы получим следующий вывод.

Force Update

Иногда мы можем захотеть обновить компонент вручную. Это может быть достигнуто с помощью метода forceUpdate () .

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;

Мы устанавливаем случайное число, которое будет обновляться при каждом нажатии кнопки.

Найти Дом Нод

Для манипулирования DOM мы можем использовать метод ReactDOM.findDOMNode () . Сначала нам нужно импортировать реаги-дом .

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;

Цвет элемента myDiv меняется на зеленый после нажатия кнопки.

Примечание. Начиная с версии 0.14, большинство более старых методов API-компонентов устарели или удалены для соответствия ES6.