非模块

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（）适用于＆＃39; react-dom＆＃39;发展。但是，只要我尝试进口minified＆＃39; react-dom.min＆＃39;而不是＆＃39; react-dom＆＃39;，render（）没有得到解决，也没有任何反应。我无法从内容辅助（ctrl + space）中找到render（）。

我已经安装了react@15.6.1和react-dom@15.6.1与npm并且他们已经安排在＆nbsp;＆nbsp;＆＃39; npm list＆＃39;。然后我尝试重新安装它们但是没有用。

Answer 1

在您的情况下，您必须使用import ReactDOM from 'react-dom'因为import 并不意味着＆＃34;文件导入＆＃34; ，这意味着 ＆＃34; ES6模块导入＆＃34; 。

要缩小捆绑文件，请尝试uglifyjs-webpack-plugin（如果您正在使用webpack）或minifyify（如果您正在使用browserify）< / p>

Answer 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，则ReactDOM全局可以使用这些顶级API。

如果您将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 3

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

在常用的 Index.js 文件中导入组件时，您正在导入组件（从'./components/Header'导入标题; ）。< / p>

标题应与导出默认 headerComponent 不同;名称

ReactDOM.render（）未解析

3 个答案:

非模块

安装

使用

注意