Question

我正在尝试遵循此react-eslint doc中的建议，以避免使用内联函数。

我有一个onClick功能的div，如下所示：

onClick={ () => this.props.handleClick(some_constant) }

这完全正常，但是我不希望有内联函数。当我尝试通过遵循上面提供的链接中的模式来抽象它时，我得到一个无限运行的setState错误。

class Foo extends React.Component {
  constructor() {
    super();

    this._handleClickWrapper = this.handleClickWrapper.bind(this);
  }

  _handleClickWrapper() {
    // handleClick is a callback passed down from the parent component
    this.props.handleClick(some_constant)
  }

  render() {
    return (
      <div onClick={this._handleClickWrapper}>
        Hello!
      </div>
    );
  }
}

需要做什么才能避免使用内联函数？

修改

我犯了一个严重的拼写错误，但在我的代码中，我有目前反映的内容，但仍然会导致错误。

Answer 1

您将错误的功能绑定到this。它应该是：

this._handleClickWrapper = this._handleClickWrapper.bind(this);

这种方式_handleClickWrapper将始终绑定到组件的上下文。

Answer 2

如果你真的真的想要遵循jsx-no-bind规则，你可以创建一个新组件并将someConstant作为道具传递。然后，组件可以使用值someConstant：

调用您的回调

class FooDiv extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

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

  handleClick() {
    this.props.onClick(this.props.someConstant);
  }
}

然后您的Foo组件可以执行此操作：

class Foo extends React.Component {
  render() {
    const someConstant = ...;
    return (
      <FooDiv
        onClick={this.props.handleClick}
        someConstant={someConstant}
      />
    );
  }
}

话虽如此，我建议不要关注jsx-no-bind并在渲染中使用bind或箭头函数。如果您因使用内联函数导致的重新渲染而担心性能，请查看reflective-bind库。

Answer 3

有一个拼写错误

this._handleClickWrapper = this.handleClickWrapper.bind(this);

应该是

this._handleClickWrapper = this._handleClickWrapper.bind(this);

忘了将props传递给super()

constructor(props) {
  super(props);
  this._handleClickWrapper = this._handleClickWrapper.bind(this);
}

Tipp ：您可以使用类中的箭头函数声明（babel-preset-es2016）来避免绑定（甚至是构造函数）。

class Foo extends React.Component {

  state = {} // if you need it..

  onClick = () => {
    this.props.handleClick(some_constant)
  }

  render() {
    return (
      <div onClick={this.onClick}>
        Hello!
      </div>
    );
  }
}

这样，您的组件变得更小，更易于阅读。

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

如何避免在React（ES6）中使用带有参数的函数的内联函数

3 个答案: