Actualmente estoy trabajando en una aplicación de reacción, y me resultó un poco engorroso tener que enlazar this cuando una clase de componente tiene muchas funciones.
class Foo extends Component { constructor(props){ super(props); this.function1 = this.function1.bind(this); this.function2 = this.function2.bind(this); this.function3 = this.function3.bind(this); } function1() { ... } function2() { ... } function3() { ... } }¿Hay una manera más eficiente de hacer esto?
Puede evitar tener que vincular métodos utilizando el complemento de Babel transform-class-properties , que es una característica experimental de ES7. Asegúrate de habilitar la etapa 0 para poder usarla.
Esto permite el uso de funciones de flecha al definir sus métodos de clase, aprovechando el enlace léxico de las funciones de flecha para que this se refiera al contexto de la función (en este caso, la clase), así:
class Foo extends Component { boundFunction = () => { /* 'this' points to Foo */ } }Puedes acortarlo un poco con:
esta.funcion1 = ::esta.funcion1
Necesitará https://babeljs.io/docs/plugins/transform-function-bind/