为什么Flow无法使用document.getElementById(...)调用ReactDOM.render [英] Why Flow cannot call ReactDOM.render with document.getElementById(...)

问题描述

我在以下流程类型检查中遇到此错误.

I was getting this error below in Flow type checking.

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中以某种方式指定类型.

I believe I had to specify the type somehow in getElementById.

因此，我通过将document.getElementById("root");存储在具有类型说明的常量变量中来解决该错误:

So I fixed the error by storing document.getElementById("root"); in a constant variable with a type specification:

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

该错误已修复，希望对其他人有用，但我很想了解导致此错误的原因.有人能告诉我这是什么吗?

The error is fixed and I hope this is useful for other folks, but I'd love to understand what was causing this error. Can anyone be so kind to tell me what this was?

推荐答案

Aleksey L. 首次获得此奖项这些评论，我想将此信息提高到答案级别，以便于视觉扫描.

Aleksey L. got this first in the comments, I wanted to bring this info up to the answer level for easier visual scanning.

Flow让您知道调用document.getElementById("root");可以返回null，在这种情况下，应用程序将完全崩溃.因此，请注意这一点:

Flow is letting you know that the call document.getElementById("root"); can return null in which case the app would completely crash. So let's guard against that:

const root = document.getElementById('root')

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

当然，鉴于您很有可能将控制要渲染到的HTML，因此这会让人感到烦恼.

Granted, this can feel a little annoying given that in all likelihood you will be controlling the HTML you are rendering into.

这篇关于为什么Flow无法使用document.getElementById(...)调用ReactDOM.render的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！