javascript - this.props 上的属性不存在

Question

我可以在 this.props 上控制我的属性(property)。但是 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 中定义 Prop 的类型。

Answer 1

TypeScript 提示是因为它不知道什么类型的 props 应该在你的 React 组件中。为了指定这一点，您可以指定 props(和 state，如果需要的话)应该是什么类型。这可以通过更改创建 React 组件类的方式轻松完成，例如:

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

其中 P 指定 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 指定类型或接口(interface)，这样您就可以真正利用 TypeScript 提供的类型优势，就像这样:

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

您想要采用哪种解决方案最终取决于您，使用 any 将提供更大的灵 active ，而使用特定类型将有助于您的代码 self 记录和类型安全。