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

Question

我的 JSX 中有这个：

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

.bind但是，我发誓我已经看到了在将回调方法传递给子 React 组件时否定这种需要的想法，对吗？

Answer 1

您可以将箭头函数与属性初始化结合使用。

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

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

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

Answer 2

您可以使用 ES2015 类语法与此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不必使用用箭头函数定义的方法。