【问题标题】：ReactDOM.render() unresolvedReactDOM.render() 未解决
【发布时间】：2017-07-26 04:50:48
【问题描述】：

import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/dist/react-dom.min';
import {Alert} from 'reactstrap';

class AlertLine extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: true
        };
    }

    onDismiss = () => {
        this.setState(
            {
                visible: false
            }
        );
    };

    render() {
        return (
            <div>
                <Alert color="success" isOpen={this.state.visible} toggle={this.onDismiss}>
                    <strong>Success!</strong> You successfully read this important alert message.
                </Alert>
            </div>
        );
    }
} 

ReactDOM.render(
    <AlertLine/>,
    document.getElementById('root')
);

ReactDOM.render() 可以很好地与 'react-dom' 一起用于开发。但是，一旦我尝试导入缩小的 'react-dom.min' 而不是 'react-dom'，render() 就无法解决，并且什么也没有发生。我也无法从内容辅助（ctrl + 空格）中找到 render()。

我已经使用 npm 安装了 react@15.6.1 和 react-dom@15.6.1，它们位于“npm 列表”中。然后我尝试重新安装它们，但没有奏效。

【问题讨论】：

导入与文件系统的行为不是 1:1。您只能从文件显式导出的文件中导入内容（使用关键字export）。如果你想缩小你的代码，你应该使用构建工具。

标签： javascript reactjs react-dom

【解决方案1】：

在你的情况下，你必须使用import ReactDOM from 'react-dom'，因为import 并不意味着“文件导入”，它意味着“ES6模块导入”。

要缩小您的捆绑文件，请尝试uglifyjs-webpack-plugin（如果您使用的是webpack）或minifyify（如果您使用的是browserify）

【讨论】：

这并不意味着“node.js 模块导入”，它只是意味着“模块导入”。它是 ECMAScript 6 的一部分，而不是 Node.js。
我明白这一点，但在 React 的情况下，babel 会将其转换为 nodejs 的require。但谢谢你的想法。立即更新。
不一定。这取决于 babel 设置。 Babel 只是一个实现细节，不会改变语法 import 的含义或它的行为方式。此外，模块是available natively now，所以我们甚至不需要 babel。
是的，但那不是重点，我的意思是进一步解释为什么说“nodejs 模块导入”是不正确的:)。所有这些语法意味着您正在导入一个模块，您无法确定用户的构建系统将如何转换它，或者即使它会。
同意，感谢@nem035 帮助我更多地了解babel 工作：D

【解决方案2】：

非模块

使用 require / import 加载的节点模块必须填充导出对象模块想要公开的所有内容。

stackoverflow.com/a/14914442/6836839

react-dom.min.js用作简单的js库，不能import/require

安装

由于不能要求/导入，所以需要将其加载为普通的js 脚本：

<!-- index.html -->
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>

使用

// Just call it...
ReactDOM.render(component, document.getElementById('root'))

注意

如果你从标签加载 React，这些顶级 API 在 ReactDOM 全局中可用。

如果你使用 ES6 和 npm，你可以写 import：

import ReactDOM from 'react-dom'

如果你使用 ES5 和 npm，你可以这样写：

var ReactDOM = require('react-dom');

https://facebook.github.io/react/docs/react-dom.html

【讨论】：

【解决方案3】：

导入名称与您要导出的组件名称不同。

当您在通用 Index.js 文件中导入组件并且正在导入组件时（import Header from './components/Header';）。

Header 应该不同于导出默认的headerComponent；名字

【讨论】：