ReactJSTips: Анонимная функция

  • 2150
  • Дата: 14.07.2018 в 09:58:00

Передавать callback в компоненты можно разными способами и не каждый может быть верным. Я исходил из «best practices» от Airbnb и из своего опыта и делюсь тем, как правильно пробрасывать методы в ваши компоненты.

Анонимная функция (передача аргументов вручную)

1// ✅ GOOD
2<Button onClick={removeItem.bind(this, id)}>Удалить</Button>
3
4// ❌ BAD
5<Button
6  onClick={() => {
7    removeItem(id);
8  }}>
9  Удалить
10</Button>
11

Старайтесь не создавать анонимную функции, для передачи данных в другую функцию в «функциональном компоненте (stateless component)». Для подобной ситуации, используйте метод — .bind().

Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.

В onClick передавайте функцию removeItem с привязкой контекст и новых аргументов.

Подробнее о .bind(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Анонимная функция (передача аргументов по умолчанию)

1// ✅ GOOD
2<Input onChange={this.props.onChange} />
3
4// ✅ GOOD
5<Input onChange={this.props.onChange.bind(this, 'myField')} />
6
7// ❌ BAD
8<Input onChange={value => this.props.onChange(value)} />
9

В данном случае, метод onChange автоматически передаст value первым аргументом в функцию this.props.onChange.

Если же вы хотите добавить дополнительные аргументы, после value, пробрасывайте их через .bind(this, ...). В итоге, onChange получит 2 значания — введённое значение пользователем и строку myField.

Переопределение контекста this в конструкторе

1// ✅ GOOD
2class App extends React.Component {
3  constructor() {
4    super();
5    this.myMethod = this.myMethod.bind(this);
6  }
7  myMethod() {
8    ...
9  }
10  render() {
11    return <Button onClick={this.myMethod}></Button>;
12  }
13}
14
15// ❌ BAD
16class App extends React.Component {
17  constructor() {
18    super();
19  }
20  myMethod() {
21    ...
22  }
23  render() {
24    return <Button onClick={this.myMethod.bind(this)}></Button>;
25  }
26}
27

Верным решением для компонента-класса, будет переопределять контекст this внутри конструктора.