Eu sou novo no uso de classes ES6 com React; anteriormente, vinculei meus métodos ao objeto atual (mostrado no primeiro exemplo), mas o ES6 me permite vincular permanentemente uma função de classe a uma instância de classe com setas? (Útil ao passar como uma função de retorno de chamada.) Eu recebo erros quando tento usá-los como você pode com o 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);
}
Portanto, se eu fosse passar SomeClass.handleInputChange
para, por exemplo setTimeout
, teria como escopo a instância da classe, e não o window
objeto.
Respostas:
Sua sintaxe está um pouco desativada, faltando apenas um sinal de igual após o nome da propriedade.
Este é um recurso experimental. Você precisará habilitar os recursos experimentais no Babel para que isso seja compilado. Aqui está uma demonstração com o experimental ativado.
Para usar recursos experimentais no babel, você pode instalar o plugin relevante a partir daqui . Para esse recurso específico, você precisa do
transform-class-properties
plugin :Você pode ler mais sobre a proposta para campos de classe e propriedades estáticas aqui
fonte
=
emhandleInputChange =
Não, se você deseja criar métodos vinculados, específicos da instância, precisará fazer isso no construtor. No entanto, você pode usar funções de seta para isso, em vez de usar
.bind
em um método de protótipo:Existe uma proposta que pode permitir que você omita
constructor()
e coloque diretamente a tarefa no escopo da classe com a mesma funcionalidade, mas eu não recomendaria usá-la, pois é altamente experimental.Como alternativa, você sempre pode usar
.bind
, o que permite declarar o método no protótipo e vinculá-lo à instância no construtor. Essa abordagem tem maior flexibilidade, pois permite modificar o método de fora da sua classe.fonte
Sei que esta pergunta foi respondida suficientemente, mas só tenho uma pequena contribuição a fazer (para aqueles que não querem usar o recurso experimental). Devido ao problema de ter que vincular várias funções a um construtor e torná-lo bagunçado, criei um método utilitário que, uma vez vinculado e chamado no construtor, faz todas as ligações necessárias para você automaticamente.
Suponha que eu tenho essa classe com o construtor:
Parece confuso, não é? Agora eu criei esse método utilitário
Tudo o que agora preciso fazer é importar esse utilitário e adicionar uma chamada ao meu construtor, e não preciso vincular cada novo método ao construtor. O novo construtor agora parece limpo, assim:
fonte
shouldComponentUpdate
egetSnapshotBeforeUpdate
Você está usando a função de seta e também a vincula no construtor. Portanto, você não precisa vincular quando usa as funções de seta
OU você precisa vincular uma função apenas no construtor quando usar a função normal, como abaixo
Também não é recomendável vincular uma função diretamente na renderização. Deve sempre estar no construtor
fonte