我在流程类型检查中收到以下错误。
Cannot call ReactDOM.render with document.getElementById(...) bound to container because null [1] is incompatible with Element [2]. src/index.js 26│ </Switch> 27│ </ScrollToTop> 28│ </BrowserRouter> 29│ </Provider>, document.getElementById("root")); 30│ /private/tmp/flow/flowlib_174a8121/dom.js [1] 646│ getElementById(elementId: string): HTMLElement | null; /private/tmp/flow/flowlib_174a8121/react-dom.js [2] 18│ container: Element,
代码如下。
// @flow "use strict"; import React from "react"; import ReactDOM from "react-dom"; import {createStore, applyMiddleware} from "redux"; import {Provider} from "react-redux"; import {BrowserRouter, Switch, Route} from "react-router-dom"; import Home from "./components/home"; import Detail from "./components/detail"; import LevelOfGame from "./components/level-of-game"; import NotFound from "./components/not-found"; import ScrollToTop from "./components/scroll-to-top"; import reducers from "./reducers"; const createStoreWithMiddleware = applyMiddleware()(createStore); ReactDOM.render(<Provider store={createStoreWithMiddleware(reducers)}> <BrowserRouter> <ScrollToTop> <Switch> <Route exact path="/" component={Home}/> <Route path="/detail/:detailId" component={Detail}/> <Route path="/level-of-game" component={LevelOfGame}/> <Route path="*" component={NotFound} status={404}/> </Switch> </ScrollToTop> </BrowserRouter> </Provider>, document.getElementById("root"));
我相信我必须以某种方式指定类型getElementById。
getElementById
因此,我通过存储document.getElementById("root");在具有类型规范的常量变量中来修复错误:
document.getElementById("root");
const root: any = document.getElementById("root");
该错误已修复,希望对其他人有用,但我很想了解造成此错误的原因。谁能告诉我这是什么吗?
Aleksey L.在评论中首当其冲,我想将此信息提高到答案级别,以便于视觉扫描。
Flow让您知道调用document.getElementById("root");可以返回,null在这种情况下,应用程序将完全崩溃。因此,请注意以下几点:
null
const root = document.getElementById('root') if (root !== null) { ReactDOM.render(<App /> , root) }
的确,由于您很可能将控制要渲染到的HTML,所以这会让人感到烦恼。