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

Refactoring functions passed as properties from es5 to es6

本文关键字：es6 函数 es5 属性 重构      更新时间：2023-09-26

我目前正在将我的代码从 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');
  }
}

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

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

这会解决您的问题吗？

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
};
相关文章：