避免React中的内联函数:如何使用参数绑定函数？

Question

我正在尝试使用他们推荐的ES6类模式来遵循React 的无绑定规则:

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
  _onClick() {
    // Do whatever you like, referencing "this" as appropriate
  }
}

但是,当我需要传递参数时_onClick,需要改变什么？

我尝试过类似的东西:

import {someFunc} from 'some/path';

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this, a, b);
  }
  render() {
    const {
     prop1,
     prop2
    } = this.props;

    return (
      <div onClick={this._onClick(prop1, prop2}>
        Hello!
      </div>
    );
  }
  _onClick = (a, b) => {
    someFunc(a, b);
  }
}

但是,这不起作用.需要改变什么？

Answer 1

bind构造函数中的调用只应this作为单个参数传递.

this._onClick = this._onClick.bind(this);

在这里,您将this._onClick使用具有正确this边界的新属性覆盖该属性.如果你的函数有两个参数,那么你应该在调用时正常传递它们.

传递额外的参数bind意味着该函数返回已经提供这些参数-在你尝试的_onClick功能永远有它的前两个参数undefined,因为a和b在构造函数中没有价值.

现在你已经绑定this了你的函数,你可以this.props从那里访问,而不必传递参数:

import {someFunc} from 'some/path';

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
  _onClick() {
    const {
     prop1,
     prop2
    } = this.props;
    someFunc(prop1, prop2);
  }
}

Answer 2

您应该使用partial application。基本上，您可以使用所需的参数初始化onClick函数，并且单击div时，onClick函数将返回要调用的新函数。

import {someFunc} from 'some/path';

class Foo extends React.Component {
  render() {
    return (
      <div onClick={this._onClick(prop1, prop2}>
        Hello!
      </div>
    );
  }
  _onClick = (a, b) => {
    return () => someFunc(a, b);
  }
}

PS：这仅适用，如果你的参数a并b没有你的一部分this.props，如果是，那么你应该只是做的Tom Fenech说。