我正在使用react-redux和typescript,所以我有.tsx文件。我的简单代码看起来非常简单明了但是typescript编译器抛出了Provider元素的类型错误,所以我不明白我做错了什么。
这是我的简单代码
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Router } from 'react-router';
...
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path='/' component={MyTopComponent} breadcrumbIgnore>
<Route
path='home'
component={MyComponent}
>
</Route>
</Route>
</Router>
</Provider>,
document.getElementById('app'),
);
这是错误:
JSX element type 'Provider' is not a constructor function for JSX elements.
Types of property 'render' are incompatible.
Type '() => string | number | false | Element | Element[]' is not assignable to type '{ (): string | number | false | Element | Element[]; (): string | number | false | Element | Elem...'.
Type 'string | number | false | Element | Element[]' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.
在支持TS的Sublime编辑器中,我看到了对此错误的描述:
Property "render" are missing in type "Provider"
感谢您的帮助!
P.S。这是包版本
"devDependencies": {
"@types/react": "16.0.7",
"@types/react-dom": "15.5.5",
"@types/react-i18next": "4.6.0",
"@types/react-redux": "5.0.9",
"@types/react-test-renderer": "15.5.4",
"awesome-typescript-loader": "3.2.3",
...
"tslint": "5.7.0",
"typescript": "2.5.3",
...
},
"dependencies": {
... ,
"i18next": "9.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-dom-factories": "1.0.2",
"react-i18next": "6.0.0",
"react-redux": "5.0.6",
"react-router": "3.0.2",
"redux": "3.7.2",
...
},
答案 0 :(得分:0)
我找到了解决此问题的解决方案。
正如JulienD和pamelus提到检查依赖关系版本我寻找了redux / react / dom版本
因此,当我更新这些包时,typescript编译器开始正常工作
"@types/react": 16.0.7 -"16.0.10",
"@types/react-dom": 15.5.5 -> "16.0.1",
"@types/react-redux": 5.0.9 -> "5.0.10",
希望它有所帮助。最好的问候。