Я новичок в использовании классов ES6 с React, ранее я связывал свои методы с текущим объектом (покажите в первом примере), но позволяет ли ES6 навсегда привязать функцию класса к экземпляру класса с помощью стрелок? (Полезно при передаче в качестве функции обратного вызова.) Я получаю ошибки, когда пытаюсь использовать их как можно с CoffeeScript:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
Так что если бы я должен был пройти SomeClass.handleInputChange
, например setTimeout
, он был бы ограничен экземпляром класса, а не window
объектом.
Ответы:
Ваш синтаксис немного отключен, просто отсутствует знак равенства после имени свойства.
Это экспериментальная особенность. Вам нужно будет включить экспериментальные функции в Babel, чтобы компилировать это. Вот демо с включенным экспериментом.
Для использования экспериментальных функций в Babel вы можете установить соответствующий плагин отсюда . Для этой конкретной функции вам нужен
transform-class-properties
плагин :Вы можете прочитать больше о предложении для полей класса и статических свойств здесь
источник
=
вhandleInputChange =
Нет, если вы хотите создать связанные, специфичные для экземпляра методы, вам придется сделать это в конструкторе. Однако для этого вы можете использовать функции стрелок вместо
.bind
метода-прототипа:Существует предложение, которое может позволить вам опустить
constructor()
и непосредственно поместить назначение в область видимости класса с той же функциональностью, но я бы не рекомендовал использовать это, поскольку это очень экспериментально.В качестве альтернативы вы всегда можете использовать
.bind
, что позволяет вам объявить метод в прототипе и затем связать его с экземпляром в конструкторе. Этот подход обладает большей гибкостью, поскольку позволяет изменять метод извне вашего класса.источник
Я знаю, что на этот вопрос был дан достаточный ответ, но у меня есть небольшой вклад (для тех, кто не хочет использовать экспериментальную функцию). Из-за проблемы привязки нескольких привязок функций в конструкторе и придания ему грязного вида, я пришел к вспомогательному методу, который после привязки и вызова в конструкторе автоматически выполняет все необходимые привязки методов.
Предположим, у меня есть этот класс с конструктором:
Это выглядит грязно, не так ли? Теперь я создал этот служебный метод
Все, что мне теперь нужно, это импортировать эту утилиту и добавить вызов в мой конструктор, и мне больше не нужно связывать каждый новый метод в конструкторе. Новый конструктор теперь выглядит чистым, вот так:
источник
shouldComponentUpdate
иgetSnapshotBeforeUpdate
Вы используете функцию стрелки, а также связываете ее в конструкторе. Так что вам не нужно делать привязку при использовании функций стрелок
ИЛИ вам нужно привязать функцию только в конструкторе, когда вы используете обычную функцию, как показано ниже
Также не рекомендуется связывать функцию непосредственно при рендеринге. Это всегда должно быть в конструкторе
источник