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

Передавать callback
в компоненты можно разными способами и не каждый может быть верным. Я исходил из «best practices» от Airbnb и из своего опыта и делюсь тем, как правильно пробрасывать методы в ваши компоненты.
# Анонимная функция (передача аргументов вручную)
// ✅ GOOD
<Button onClick={removeItem.bind(this, id)}>Удалить</Button>
// ❌ BAD
<Button
onClick={() => {
removeItem(id);
}}>
Удалить
</Button>
Старайтесь не создавать анонимную функции, для передачи данных в другую функцию в «функциональном компоненте (stateless component)». Для подобной ситуации, используйте метод — .bind().
Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.
В onClick
передавайте функцию removeItem
с привязкой контекст и новых аргументов.
Подробнее о .bind()
: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
# Анонимная функция (передача аргументов по умолчанию)
// ✅ GOOD
<Input onChange={this.props.onChange} />
// ✅ GOOD
<Input onChange={this.props.onChange.bind(this, 'myField')} />
// ❌ BAD
<Input onChange={value => this.props.onChange(value)} />
В данном случае, метод onChange
автоматически передаст value
первым аргументом в функцию this.props.onChange
.
Если же вы хотите добавить дополнительные аргументы, после value
, пробрасывайте их через .bind(this, ...)
. В итоге, onChange
получит 2 значания — введённое значение пользователем и строку myField
.
# Переопределение контекста this в конструкторе
// ✅ GOOD
class App extends React.Component {
constructor() {
super();
this.myMethod = this.myMethod.bind(this);
}
myMethod() {
...
}
render() {
return <Button onClick={this.myMethod}></Button>;
}
}
// ❌ BAD
class App extends React.Component {
constructor() {
super();
}
myMethod() {
...
}
render() {
return <Button onClick={this.myMethod.bind(this)}></Button>;
}
}
Верным решением для компонента-класса, будет переопределять контекст this
внутри конструктора.
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.