使用 Babel 避免在 ES6(7?) 中使用 .bind

Question

我的 JSX 中有这个：

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} />

但是，我发誓我看到一些幻想在将回调方法向下传递给子 React 组件时否定 .bind 的需要，对吗？

Answer 1

您可以使用 arrow function 结合属性初始化。

class Component extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return <div onClick={this.handleClick} />
  }
}

因为箭头函数是在构造函数的范围内声明的，并且因为箭头函数在其声明范围内维护 this，所以一切正常。这里的缺点是这些不会是原型上的功能，它们都将与每个组件一起重新创建。但是，这并不是什么坏处，因为 bind 的结果是一样的。

Answer 2

您可以使用 ES2015 class 语法和这个 autoBind 辅助函数绑定组件的所有函数：

class Component extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }

  onOptionSelect() {
    // do stuff
  }

  render() {
    return <Options options={options} onOptionSelect={this.onOptionSelect} />;
  }
}

function autoBind(obj) {
    getAllMethods(obj.constructor.prototype)
        .forEach(mtd => {
            obj[mtd] = obj[mtd].bind(obj);
        });
}

function getAllMethods(obj) {
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function");
}

请注意 Component 不必使用箭头函数定义的方法。

使用 Babel 避免在 ES6(7?) 中使用 .bind

Avoid .bind in ES6(7?) with Babel

ecmascript-6

reactjs

babeljs

ecmascript-2016