Question

我可以在this.props上管理我的媒体资源。但是ts显示错误ts（2339）。

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

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中定义道具的类型。

Answer 1

TypeScript在抱怨，因为它不知道React组件中应该包含哪种类型的 props 。为了指定此类型，您可以指定 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 指定类型或接口，以便您可以真正利用TypeScript提供的键入优势，例如：

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

您最终想使用哪种解决方案，使用 any 可以提供更大的灵活性，而使用特定类型则可以帮助您的代码进行自我记录并进行类型化-安全。

Answer 2

您可以为prop声明一个接口，并将其传递给React.Component。

interface Props {
  username: any
  login: any
}

class Header extends React.Component<Props> {
  // ...
}

Answer 3

使用构造函数 constructor()

  constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }

此.props上的属性不存在

3 个答案: