ReactDOM.render() 未解决

Question

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' 一起用于开发工作得很好。但是，一旦我尝试导入 minified 'react-dom.min' 而不是 'react-dom'，render() 就无法解析并且什么也没有发生。我也无法从 content assist(ctrl + space) 中找到 render() 。

我已经用 npm 安装了 react@15.6.1 和 react-dom@15.6.1，它们在 'npm list' 上。然后我尝试重新安装它们，但没有用。

Answer 1

非模块

Node modules loaded with require / import must populate an exports object with everything that the module wants to make public.

whosebug.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'))

备注

If you load React from a tag, these top-level APIs are available on the ReactDOM global.

如果你用ES6搭配npm，可以写import:

import ReactDOM from 'react-dom'

如果你用ES5搭配npm，你可以这样写：

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

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

Answer 2

在你的情况下，你必须使用 import ReactDOM from 'react-dom' 因为 import 并不意味着 "file import"，它意味着 "ES6 module import".

要缩小您的捆绑文件，请尝试 uglifyjs-webpack-plugin (if you're using webpack) or minifyify（如果您使用的是 browserify）

Answer 3

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

当您在公共 Index.js 文件中导入一个组件时，您正在导入一个组件（从 '. /components/Header';).

Header 应该不同于 export default headerComponent；名字

ReactDOM.render() 未解决

ReactDOM.render() unresolved

javascript

reactjs

react-dom

非模块

安装

使用

备注