javascript - Properties on this.props does not exist - Stack Overflow

admin管理员组

文章数量:1391937

I can console my property on this.props. But ts shows error ts(2339).

I have tried to define the type of this.props. But 'this.props' is ReadOnly already.

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 {

  ponentWillMount(){
    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);

In my code, 'this.props.log' and 'this.props.username' show not defined.

I want to know how to fix this error message.And how to define the type of props in Reactjs.

I can console my property on this.props. But ts shows error ts(2339).

I have tried to define the type of this.props. But 'this.props' is ReadOnly already.

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 {

  ponentWillMount(){
    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);

In my code, 'this.props.log' and 'this.props.username' show not defined.

I want to know how to fix this error message.And how to define the type of props in Reactjs.

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Apr 13, 2019 at 23:39 etarhan 4,17622 gold badges1717 silver badges2929 bronze badges asked Apr 13, 2019 at 2:45 David ChanDavid Chan 73111 gold badge77 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

TypeScript is plaining because it is unaware of what type props should be inside of you React ponent. In order to specify this you can specify what type props (and state, if needed) should be. This is done easily by changing how you create the React ponent class, for example:

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

Where P specifies the property type of props and S the property type of state. If you feel like TypeScript is being annoying and don't feel like using a specific type for your props you can go ahead and do this:

class Header extends React.Component<any> {

Or if you don't want a particular type for neither props nor state you could do:

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

Since any will allow props and state to by anything, even stuff which are not objects, you could do the following to ensure they are at least object:

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

({}, could also be Object here). But considering you are using TypeScript and not just JavaScript, it's probably worth specifying an type or interface for your props so you can actually utilize the typing benefits that TypeScript offers, like so:

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

Which solution you want to go for is ultimately up to you, using any will allow for more flexibility while using specific types will help your code be self-documenting and be type-safe.

You can declare a interface for prop and pass it to React.Component.

interface Props {
  username: any
  login: any
}

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

use constructor constructor()

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

本文标签： javascriptProperties on thisprops does not existStack Overflow