Question

我从反应组件中得到了一个ts错误。组件运行正常，构建等，但是typescript在ide中显示错误。不知道我需要如何声明这个以消除错误。我试图在组件本身内部创建一个setState方法，但这会产生更多错误。

错误：（15,19）TS2605：JSX元素类型＆＃39; Home＆＃39;不是构造函数 JSX元素的函数。财产＆＃39; setState＆＃39;在类型中缺失＆＃39;首页＆＃39;

＆＃34;打字稿＆＃34;：＆＃34; ^ 2.3.4＆＃34;，

＆＃34;反应＆＃34;：＆＃34; ^ 15.5.4＆＃34;，

＆＃34; react-dom＆＃34;：＆＃34; ^ 15.5.4＆＃34;，

！----

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>
  }
}

- 其余部分为了简洁而删除

{{1}}

Answer 1

有同样的问题，但是我的问题是我导入的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组件中使用任何props和state变量，但是通常应该自己定义它们以利用TypeScript的类型注释。

Answer 2

以下是如何使用状态和渲染组件的示例：

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 } />
    }
}

如您所见，道具和状态对象总是很简单，渲染方法负责创建实际组件。
这种方式反应知道哪些组件被更改以及DOM树的哪些部分应该更新。

Reactj，typescript属性＆＃39; setState＆＃39;在类型中缺失

2 个答案: