reactjs - typescript react 不正确导入

Question

我有以下 typescript :

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <div>
      <p>Hello world!</p>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

它产生以下js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const App = () => {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("p", null, "Hello world!")));
};
react_dom_1.default.render(react_1.default.createElement(App, null), document.getElementById('app'));
//# sourceMappingURL=react.component.js.map

运行时出现如下错误:

(index):29 Error: (SystemJS) Cannot read property 'render' of undefined
  TypeError: Cannot read property 'render' of undefined

看起来 react_dom_1.default 是 undefined，但我不知道为什么？

Answer 1

尝试:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

更新

It worked. Could you maybe explain why the other method does not?

在Es6模块系统中，导出和导入有多种方式:

隐式导入(即默认)

您可以导出如下内容:

export default someVar;

然后导入为:

import someVar from "./somemodule"

显式导入

您可以导出如下内容:

export { someVar };

然后导入为:

import { someVar } from "./somemodule";

一个模块可以有多个导出:

export { someVar1, someVar2 };

您可以在一次导入中导入多个实体:

import { someVar, someVar2 } from "./somemodule";

您还可以在实体级别声明别名:

import { someVar as A, someVar2 as B } from "./somemodule";

或者在模块级别:

import * as SomeModule from "./somemodule";

Amd 然后访问实体:

console.log(SomeModule.someVar);
console.log(SomeModule.someVar2);

您使用的是来自 React 和 ReactDom 的默认导入，但这些模块公开了多个实体。