Question

我有以下打字稿：

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

运行时，我收到以下错误:(索引）：29错误：（SystemJS）无法读取属性＆＃39;渲染＆＃39;未定义的 TypeError：无法读取属性＆＃39; render＆＃39;未定义的

似乎react_dom_1.default未定义，但我不知道为什么？

Answer 1

尝试：

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

更新

有效。你能解释为什么其他方法没有吗？

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

隐式导入（默认为AKA）

您可以导出以下内容：

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的默认导入，但这些模块会显示多个实体。

打字稿反应不正确导入

1 个答案:

更新

隐式导入（默认为AKA）

明确导入