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类语法将组件的所有函数绑定到此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

2 个答案: