React JS для начинающих: Ссылки и ключи

Refs (ссылки) используются для возвращения ссылки на ваш элемент. Refs следует избегать в большинстве случаев, но они могут быть полезны при измерения DOM или добавления методов к компонентам.

React JS для начинающих:

Использование ссылок

Ниже представлен пример использования ссылок для очистки поля ввода. Функция clearInput ищет элемент со значением ref = "myInput", затем сбрасывает состояние и добавляет к нему фокус после того, как кнопка была нажата.

App.jsx

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

class App extends React.Component {

   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }

      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };

   updateState(e) {
      this.setState({data: e.target.value});
   }

   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }

   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </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'));

Теперь при нажатии на кнопку, поле ввода очистится и на нем появится фокус.

react refs

React keys (ключи) полезны при работе с динамически создаваемыми компонентами и при изменении списков пользователями. Ключ позволяет уникализировать объект даже после его изменения.

Использование ключей

Давайте динамически создадим элементы контента с уникальным индексом (i). Функция map создаст три элемента из нашего массива. Поскольку значение ключа должно быть уникальным для каждого элемента, мы назначим i в качестве ключа для каждого создаваемого элемента.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: 
         [
            {
               component: 'First...',
               id: 1
            },
				
            {
               component: 'Second...',
               id: 2
            },
				
            {
               component: 'Third...',
               id: 3
            }
         ]
      }

   }

   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </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'));

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

react keys

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

Перевод статьи ReactJS - Keys

Тэги: react.js

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.