Question

我在Typescript中有以下代码。为什么编译器会引发错误？

import { connect } from 'react-redux';
import React from "react";
import { Link, Redirect } from "react-router-dom";

class HeaderComponent extends React.Component {
    render() {
        return (
            <header>
                <div><Link to="">Sign up</Link></div>
                <div>{this.props.handleLoginDisplay}</div>
            </header>
        )
    }
}

const mapStateToProps = (state: { showLoginModal: any; }) => {
    return {
        showLoginModal: state.showLoginModal
    }
}

const mapDispatchToProps = (dispatch: (arg0: { type: string; }) => void) => {
    return {
        handleLoginDisplay: () => dispatch({ type: 'HANDLE_LOGIN_DISPLAY' })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HeaderComponent);

类型为'Readonly <{}>和Readonly <{子代的属性'handleLoginDisplay'不存在：ReactNode; }>'。ts（2339）

Answer 1

因为您需要通过以下界面告诉ts该组件将接收哪种道具：

interface Props {
    showLoginModal: boolean;
    handleLoginDisplay: () => void;
}

class HeaderComponent extends React.Component<Props> {
    render() {
        return (
            <header>
                 <div><Link to="">Sign up</Link></div>
                 <div>{this.props.handleLoginDisplay}</div>
             </header>
     )}
 }

这将使ts知道HeaderComponent接受这些道具。您还应该从mapStateToProps中删除任何内容。

属性'handleLoginDisplay'在'Readonly <{}>和Readonly <{子代类型上不存在：ReactNode; }>

1 个答案: