tsx 编写react 遇见类型“Readonly<{}>”上不存在属性XXX解决办法

这样的问题是TS语法类型检测的时候会报错,这时候可以给state个props生命类型,问题解决,代码如下:

import React from "react";
type StateType = {
  name: string;
  number: number;
};
type propType = {
    name: string;
    number: number;
  };
interface Test1 {
  state: StateType;
  props:propType
}
class Test1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      number: 2
    };
  }

  render() {
    console.log(this.props.name);
    return (
      <div>
        <div>
          <label htmlFor="">单号</label>
          <input
            type="text"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
        </div>
        <div>
          <label htmlFor="">创建用户</label>
          <input
            type="text"
            value={this.state.number}
            onChange={e => this.setState({ number: e.target.value })}
          />
        </div>
        <div></div>
      </div>
    );
  }
}

export default Test1;

这个

propType和
StateType 
就是声明类型的地方,如此问题解决,网上还有一种方案是把
React.Component改成
 React.Component<any, any>
但是这样一来对state和props的类型检测就失去意义了,所以不太建议使用
但是其实还能这么写,看一下TS的解释会发现
React.Component<any, any>
 这里面的第一个any可以是props的类型,第二个any可以是state的类型,即:
class Test1 extends React.Component<propType,StateType>
问题一样可以解决
 
posted @ 2020-06-02 11:04  洛晨随风  阅读(12875)  评论(0编辑  收藏  举报