React+TypeScript确认组件编译报错：no-unused-expressions求助

嘿，我一眼就揪出你代码里的问题啦！你遇到的no-unused-expressions编译错误，核心原因是没有正确调用传入的回调函数。

错误根源 #

看一下你Confirm.tsx里的这两个处理函数：

private handleOkClick = () => {
  this.props.onOkClick; // 这里只是引用了函数，没有执行它！
}

private handleCancelClick = () => {
  this.props.onCancelClick; // 同样的问题
}

你只是写了this.props.onOkClick，这仅仅是对函数的引用，并没有实际触发这个函数执行。ESLint的no-unused-expressions规则会把这种“只引用不执行”的表达式判定为无用代码，所以抛出了错误。

修复方法 #

只需要给这两个回调函数加上()，让它们执行起来就行：

private handleOkClick = () => {
  this.props.onOkClick();
}

private handleCancelClick = () => {
  this.props.onCancelClick();
}

额外优化建议 #

其实你完全可以省略这两个中间的处理函数，直接把props里的回调绑定到按钮的onClick事件上，这样代码更简洁，还能避免这类低级错误：

<div className="confirm-buttons-container">
  <button className="confirm-cancel" onClick={this.props.onCancelClick}>
    {this.props.cancelCaption}
  </button>
  <button className="confirm-ok" onClick={this.props.onOkClick}>
    {this.props.okCaption}
  </button>
</div>

这样修改之后，你的组件应该就能正常编译，点击按钮也能触发对应的回调啦！

内容的提问来源于stack exchange，提问作者BennKingy