this.props 上的属性不存在

Question

我可以在 this.props 上安慰我的财产。但是 ts 显示错误 ts(2339)。

我试图定义 this.props 的类型。但是 'this.props' 已经是只读的。

import React from 'react';
import {Avatar} from 'antd';
import router from 'umi/router';
import styles from './index.css';
import { connect } from 'dva';
import LeftBar from '../leftbar';

const mapStateToProps = (state: any) => {
  return {
    username: state.global.username,
    login: state.global.login
  }
}
class Header extends React.Component {

  componentWillMount(){
    if(!this.props.login){
      router.push('/');
    }
  }
  handleClick = () => {
    console.log('this state:'+this.state);
    console.log('this props:'+this.props);
    // router.push('/');
  }
  public render () {
    return (
      <div className={styles.navbar}>
        {/* <img src="logo.png"/> */}
        <div className={styles.title}>login</div>
        <div className={styles.userinfo} onClick={this.handleClick}>{this.props.username}<Avatar size={"large"} icon="user" /></div>
        <LeftBar></LeftBar>
      </div>
    );
  }
}

export default connect(mapStateToProps)(Header);

在我的代码中，'this.props.log' 和 'this.props.username' 显示未定义。

我想知道如何修复此错误消息。以及如何在 Reactjs 中定义 props 的类型。

Answer 1

TypeScript 抱怨是因为它不知道propsReact 组件内部应该是什么类型。为了指定这一点，您可以指定应该是什么类型props（以及state，如果需要）。这可以通过更改您创建 React 组件类的方式轻松完成，例如：

class Header extends React.Component<P, S> {

whereP指定 的属性类型props和S的属性类型state。如果您觉得 TypeScript 很烦人，并且不想为您使用特定类型，则props可以继续执行以下操作：

class Header extends React.Component<any> {

或者，如果您既不需要特定类型，props也state不能这样做：

class Header extends React.Component<any, any> {

由于any将允许props和允许state任何东西，即使是不是对象的东西，您可以执行以下操作以确保它们至少是对象：

class Header extends React.Component<{}, {}> {

（{}，也可以Object在这里）。但是考虑到您使用的是 TypeScript 而不仅仅是 JavaScript，可能值得为您指定一个类型或接口，props这样您就可以真正利用 TypeScript 提供的打字优势，如下所示：

type HeaderProps = {
  username: string
  login: any
  log: any
}
class Header extends React.Component<HeaderProps> {

您想要采用哪种解决方案最终取决于您，使用any将提供更大的灵活性，而使用特定类型将帮助您的代码自文档化和类型安全。