2
votes

Propriétés sur this.props n'existe pas

Je peux consoler ma propriété sur this.props. Mais ts montre l'erreur ts (2339).

J'ai essayé de définir le type de this.props. Mais «this.props» est déjà en lecture seule.

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);

Dans mon code, «this.props.log» et «this.props.username» ne sont pas définis. p>

Je veux savoir comment corriger ce message d'erreur et comment définir le type d'accessoires dans Reactjs.

javascript reactjs typescript

0 commentaires

3 Réponses :

0
votes

Vous pouvez déclarer une interface pour prop et la transmettre à React.Component.

interface Props {
  username: any
  login: any
}

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

0 commentaires

0
votes

utiliser le constructeur constructeur ()

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

0 commentaires

2
votes

TypeScript se plaint car il ne sait pas quel type props devrait être à l'intérieur de votre composant React. Pour le spécifier, vous pouvez spécifier le type props (et state , si nécessaire). Cela se fait facilement en modifiant la façon dont vous créez la classe de composant React, par exemple:

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

Où P spécifie le type de propriété de props et S le type de propriété de state . Si vous avez l'impression que TypeScript est ennuyeux et que vous n'avez pas envie d'utiliser un type spécifique pour vos props , vous pouvez continuer et faire ceci:

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

Ou si vous ne voulez pas de type particulier pour ni props ni state strong > vous pouvez faire:

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

Puisque any autorisera accessoires et state par n'importe quoi, même des choses qui ne sont pas des objets, vous pouvez faire ce qui suit pour vous assurer qu'ils sont au moins un objet:

class Header extends React.Component<any> {

( {} , peut également être Object ici). Mais étant donné que vous utilisez TypeScript et pas seulement JavaScript, il vaut probablement la peine de spécifier un type ou une interface pour vos props afin que vous puissiez réellement utiliser les avantages de frappe que TypeScript offre, comme ceci :

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

La solution que vous souhaitez choisir dépend en fin de compte de vous, l'utilisation de any vous permettra plus de flexibilité l'utilisation de types spécifiques aidera votre code à s'auto-documenter et à être sûr du type.

1 commentaires

Merci! En fait, j'ai résolu ce problème de cette manière.