为什么 Flow 不能用 document.getElementById(...) 调用 ReactDOM.render

IT技术 javascript reactjs flowtype
2021-05-16 03:20:07

我在下面的 Flow 类型检查中遇到了这个错误。

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.

因此，我通过存储document.getElementById("root");在具有类型规范的常量变量中来修复错误：

const root: any = document.getElementById("root");

错误已修复，我希望这对其他人有用，但我很想了解导致此错误的原因。有没有好心人告诉我这是什么？

2个回答

Aleksey L.在评论中首先得到了这一点，我想将此信息提升到答案级别，以便更轻松地进行视觉扫描。

Flow 让您知道调用document.getElementById("root");可以返回，null在这种情况下应用程序将完全崩溃。所以让我们警惕：

const root = document.getElementById('root')

if (root !== null) {
  ReactDOM.render(<App /> , root)
}

当然，考虑到您很可能会控制要呈现的 HTML，这可能会让人感到有些烦人。

虽然 Cogell 的回答是正确的，但我认为应该让代码更简单并添加一个例外。

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>, // $FlowIgnore
 document.getElementById("root")
);

注意“$FlowIgnore”注释

然后在您的.flowconfig文件中将其添加到“选项”字段中：

suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore

其它你可能感兴趣的问题
上一篇3D打印适合修理冰箱货架滑轨吗？ 下一篇在 reactjs 中以编程方式取消选中复选框