时间戳

首页 > 解决方案 > 简单的反应组件 - 期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

reactjs - 简单的反应组件 - 期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

问题描述

我正在关注一本书“Learn React with TypeScript”，并且我已经完成了第 3 章，但我似乎无法让我的程序正确编译。我只是在创建一个带有按钮的简单确认组件。

错误：./src/Confirm.tsx 第 20:3 行：需要一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

我觉得我已经正确编写了代码，有人能指出我正确的方向吗？:)

应用程序.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;

标签： reactjstypescript

解决方案

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

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

作为

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

推荐阅读