typescript Reactj，类型中缺少打字稿属性“setState”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44568789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reactj, typescript Property 'setState' is missing in type
提问by Jimi
I'm getting a ts error from my react component. The component is running fine, building etc, however typescript is showing an error inside the ide. Not sure how i need to declare this to remove the error. I've tried to create a setState method inside the component itself, but this was giving even more errors.
我的反应组件出现 ts 错误。该组件运行良好，正在构建等，但是 typescript 在 ide 中显示错误。不知道我需要如何声明以消除错误。我试图在组件本身内部创建一个 setState 方法，但这给出了更多错误。
Error:(15, 19) TS2605:JSX element type 'Home' is not a constructor function for JSX elements. Property 'setState' is missing in type 'Home'.
错误：(15, 19) TS2605:JSX 元素类型“Home”不是 JSX 元素的构造函数。'Home' 类型中缺少属性 'setState'。
"typescript": "^2.3.4",
"打字稿": "^2.3.4",
"react": "^15.5.4",
“反应”：“^ 15.5.4”，
"react-dom": "^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 />, <<<<
}
-- the rest removed for brevity
-- 为简洁起见，其余部分已删除
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>
}
}
采纳答案by Nitzan Tomer
Here's an example of how to use the state and render the components:
以下是如何使用状态和渲染组件的示例：
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 } />
}
}
As you can see, the props and state objects are always simple, and the rendering method is in charge of creating the actual components.
This way react knows which components are changed and which parts of the DOM tree should be updated.
如您所见，props 和 state 对象总是很简单，渲染方法负责创建实际组件。
通过这种方式，react 知道哪些组件发生了变化，以及应该更新 DOM 树的哪些部分。
回答by Telmo Trooper
Had the same issue, but my problem was that I was importing React wrong.
有同样的问题，但我的问题是我导入 React 错误。
The correct way to import it when using TypeScriptis with import * as React from "react".
使用 TypeScript 时导入它的正确方法是使用import * as React from "react".
Code example:
代码示例：
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"))
Note:<any, any>allows you to use any props and state variables in your React component, but you should usually define those yourself to take advantage of TypeScript's type annotations.
注意：<any, any>允许您在 React 组件中使用任何道具和状态变量，但您通常应该自己定义它们以利用 TypeScript 的类型注释。
