React.js ES6 避免将“this"绑定到每个方法 [英] React.js ES6 avoid binding 'this' to every method

问题描述

最近，我开始修改 React.js，我喜欢它.我是从普通的 ES5 开始的，为了掌握窍门，文档都是用 ES5 写的...

但现在我想尝试 ES6，因为它闪亮且新颖，而且似乎确实简化了一些事情.令我困扰的是，对于我添加到组件类中的每个方法，我现在必须将this"绑定到，否则它不起作用.所以我的构造函数最终看起来像这样:

构造函数(道具){超级(道具)；this.state = { ...一些初始状态... }this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);this.someHandler = this.someHandler.bind(this);}

如果我在类中添加更多方法，这将变得更大、更丑陋.

我的问题是，有没有办法解决这个问题，或者至少让它更容易、更短、更不丑?我想用 ES6 尝试 React 的主要原因之一是让我的代码更简洁，但这恰恰相反.任何建议或意见将不胜感激.

解决方案

您可以使用类字段 在构造函数外进行绑定.它们如下所示:

class Foo 扩展了 React.Component {handleBar = () =>{console.log('整洁');};handleFoo = () =>{console.log('cool');};使成为() {返回 (

Babel 通过其类属性转换实验性地支持类字段，但它们仍然是实验性的"，因为它们是第 3 阶段草案(尚未进入Babel 预设).

然而，在 ES7 或在 Babel 中启用该功能之前，您需要手动进行绑定.Babel 在 React 的博客文章中简要介绍了这个主题在 ES6+ 上.

Recently, I've started tinkering with React.js and I love it. I started out in the regular ES5, so as to get the hang of things, the docs are all written in ES5...

But now I wanted to try ES6, because it's shiny and new, and it does seem to simplify some things. What bothers me a lot is that for every method I had added into my component classes I now have to bind 'this' to, otherwise it doesn't work. So my constructor ends up looking like this:

constructor(props) {
  super(props);
  this.state = { ...some initial state... }

  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
}

If I were to add even more methods to my class, this would become an even bigger, uglier mess.

My question is, is there some way to get around this, or at least make it easier, shorter and less ugly? One of the main reasons I wanted to try React with ES6 was to make my code more concise, but this is doing the opposite. Any suggestions or input would be appreciated.

解决方案

You can use class fields to do the binding outside the constructor. They look like the following:

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

Class fields are supported experimentally by Babel via its class properties transform, but they are still "experimental" because they are a Stage 3 Draft (not yet in a Babel preset).

You will need to do the binding manually until ES7 or until enabling the feature in Babel, however. This topic is covered briefly in Babel's blog post on React on ES6+.

这篇关于React.js ES6 避免将“this"绑定到每个方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！