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>
问题一样可以解决
积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案