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>

问题一样可以解决

积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案

来源：https://www.cnblogs.com/llcdbk/p/13029996.html