简单反应组件-应为赋值或函数调用，但却看到一个没有未使用表达式的表达式

Question

我正在读一本书《用TypeScript学习React》，我已经完成了第3章，但我似乎无法正确编译我的程序。我只是在创建一个简单的带有按钮的确认组件。

错误：/src/Confirm.tsx第20:3行：应为赋值或函数调用，却看到一个表达式没有未使用的表达式

我觉得我写的代码是正确的，有人能告诉我正确的方向吗？：(

App.tsx

import React, { Component } from "react";
import './Confirm.css';
import Confirm from './Confirm';
class App extends Component {
private handleCancelConfirmClick = () => {
console.log("Cancel clicked");
}
private handleOkConfirmClick = () => {
console.log("Cancel clicked");
}  
public render() {
return (
<div className="App">
<Confirm
title="React and TypeScript"
content="Are you sure you want to learn?"
cancelCaption="No way"
okCaption="Yes please!"
onCancelClick={this.handleCancelConfirmClick}
onOkClick={this.handleOkConfirmClick}
/>
</div>
);
}
}
export default App;

确认.tsx

import * as React from "react";
interface Iprops {
title: string;
content: string;
cancelCaption?: string;
okCaption?: string;
onOkClick: () => void;
onCancelClick: () => void;
}
class Confirm extends React.Component<Iprops> {
public static defaultProps = {
cancelCaption: "Cancel",
okCaption: "Okay"
}
private handleOkClick = () => {
this.props.onOkClick;
}
private handleCancelClick = () => {
this.props.onCancelClick;
}
public render() {
return (
<div className="confirm-wrapper confirm-visible">
<div className="confirm-container">
<div className="confirm-title-container">
<span>{this.props.title}</span>
</div>
<div className="confirm-content-container">
<p>{this.props.content}</p>
</div>
<div className="confirm-buttons-container">
<button className="confirm-cancel" onClick={this.handleCancelClick}>
{this.props.cancelCaption}
</button>
<button className="confirm-ok" onClick={this.handleOkClick}>
{this.props.okCaption}
</button>
</div>
</div>
</div>
);
}
}
export default Confirm;

Answer 1

您必须调用带括号的方法，例如写入

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

作为

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

Answer 2

处理程序｛handleOkClick，handleCancelClick｝具有作为props传递的函数调用，因此将其称为this.props.onOkClick((，而不是this.rops.onOklick

import * as React from "react";
interface Iprops {
title: string;
content: string;
cancelCaption?: string;
okCaption?: string;
onOkClick: () => void;
onCancelClick: () => void;
}
class Confirm extends React.Component<Iprops> {
public static defaultProps = {
cancelCaption: "Cancel",
okCaption: "Okay"
}
private handleOkClick = () => {
this.props.onOkClick();
}
private handleCancelClick = () => {
this.props.onCancelClick();
}
public render() {
return (
<div className="confirm-wrapper confirm-visible">
<div className="confirm-container">
<div className="confirm-title-container">
<span>{this.props.title}</span>
</div>
<div className="confirm-content-container">
<p>{this.props.content}</p>
</div>
<div className="confirm-buttons-container">
<button className="confirm-cancel" onClick={this.handleCancelClick}>
{this.props.cancelCaption}
</button>
<button className="confirm-ok" onClick={this.handleOkClick}>
{this.props.okCaption}
</button>
</div>
</div>
</div>
);
}
}
export default Confirm;