Свойства в this.props не существуют
Я могу утешить свою собственность в 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.info('this state:'+this.state);
console.info('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.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете объявить интерфейс для prop и передать его в React.Component.
interface Props {
username: any
login: any
}
class Header extends React.Component<Props> {
// ...
}
использовать конструкторконструктор()
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
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, чтобы вы действительно могли использовать преимущества ввода, которые предлагает TypeScript, например:
type HeaderProps = {
username: string
login: any
log: any
}
class Header extends React.Component<HeaderProps> {
Какое решение вы хотите выбрать, в конечном итоге зависит от вас, использование any обеспечит большую гибкость, а использование определенных типов поможет вашему коду быть самодокументируемым и безопасным с точки зрения типов.
Спасибо! На самом деле я решил эту проблему таким образом.