Question

我目前正在将我的代码从es5重构为es6，但在重构时遇到了障碍......

<li className="pure-menu-item" onClick={this.props.onClick}></li>

如何绑定在构造函数中创建组件时传递的函数？

class NavButton extends React.Component {
  constructor () {
    super();
    this._handleClick = this.props.onClick.bind(this);
  }
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.onClick}>
        <a className="pure-menu-link">{this.props.text}</a>
      </li>
    );
  }
  _handleClick() {
    alert('test');
  }
}

Answer 1

您在类上创建了_handleClick方法，但随后在构造函数中使用this._handleClick = this.props.onClick.bind(this);覆盖它，然后通过传递onClick={this.props.onClick}完全忽略它。

我怀疑你真正想要的是bind你的onClick函数到该组件构造函数中拥有它的组件，而不是它所传递的组件。

Answer 2

这会解决您的问题吗？

class NavButton extends React.Component {
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.handleClick}>
        <a className="pure-menu-link">{this.props.text}</a>
      </li>
    );
  }
}

NavButton.propTypes = {
  handleClick: React.PropTypes.func,
  text: React.PropTypes.string
};

重构函数作为属性从es5传递到es6

2 个答案: