[英]Reactj, typescript Property 'setState' is missing in type
我从反应组件中得到了一个ts错误。 组件运行正常,构建等,但是typescript在ide中显示错误。 不知道我需要如何声明这个以消除错误。 我试图在组件本身内部创建一个setState方法,但这会产生更多错误。
错误:(15,19)TS2605:JSX元素类型'Home'不是JSX元素的构造函数。 “Home”类型中缺少属性“setState”。
“typescript”:“^ 2.3.4”,
“反应”:“^ 15.5.4”,
“react-dom”:“^ 15.5.4”,
!----
export class App extends React.Component<Props, State> {
public state: State
public props: Props
constructor(props: Props) {
super(props)
this.state = {
view: <Home />, <<<<
}
- 其余部分为简洁而删除
export class Home extends React.Component<Props, State> {
public state: State;
public props: Props;
constructor(props: Props) {
super(props)
}
public render() {
return <h1>home</h1>
}
}
有同样的问题,但我的问题是我导入React错了 。
使用TypeScript时导入它的正确方法是使用import * as React from "react"
。
代码示例:
import * as React from "react"
import ReactDOM from "react-dom"
class App extends React.Component<any, any> {
render() {
return (
<div>Hello, World!</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("app"))
注意: <any, any>
允许您在React组件中使用任何道具和状态变量,但是您通常应该自己定义它们以利用TypeScript的类型注释。
这是一个如何使用状态和渲染组件的示例:
type HomeProps = {
text: string;
}
class Home extends React.Component<HomeProps, void> {
public render() {
return <h1>{ this.props.text }</h1>
}
}
type AppState = {
homeText: string;
}
class App extends React.Component<void, AppState> {
constructor() {
super();
this.state = {
homeText: "home"
};
setTimeout(() => {
this.setState({ homeText: "home after change "});
}, 1000);
}
render() {
return <Home text={ this.state.homeText } />
}
}
如您所见,props和state对象总是很简单,渲染方法负责创建实际组件。
这种方式反应知道哪些组件被更改以及DOM树的哪些部分应该更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.