Блог

Я могу утешить свою собственность на 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.

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 использовать что угодно, даже вещи, которые не являются объектами, вы могли бы сделать следующее, чтобы убедиться, что они по крайней мере object:

 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 обеспечит большую гибкость, а использование определенных типов поможет вашему коду быть самодокументируемым и типобезопасным.

Вы можете объявить интерфейс для prop и передать его в React.Компонент.

 interface Props {
  username: any
  login: any
}

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

используйте конструктор constructor()

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