ReactDOM.render() не разрешен

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')
);

Работает с dom dev

ReactDOM.render() отлично работает с 'react-dom' для разработки. Однако, как только я пытаюсь импортировать минимизированный 'react-dom.min' вместо 'react-dom', render() остается неразрешенным, и ничего не происходит. Я также не могу найти render() из помощи по работе с контентом (ctrl + пробел).

Я установил [email protected] и [email protected] с помощью npm, и они находятся в «списке npm». Затем я попытался переустановить их, но это не сработало.


reactjs javascript react-dom
person Hwang    schedule 26.07.2017    source источник
comment
Импорт не работает 1:1 с файловой системой. Вы можете импортировать только вещи из файла, который файл явно экспортирует (с ключевым словом export). Если вы хотите минимизировать свой код, вам следует использовать инструмент сборки.   -  person nem035    schedule 26.07.2017

Ответы (3)


arrow_upward
2
arrow_downward

Немодуль

Модули Node, загруженные с помощью 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

person btzr    schedule 26.07.2017

arrow_upward
3
arrow_downward

В вашем случае вы должны использовать import ReactDOM from 'react-dom', потому что import не означает "импорт файла", это означает "импорт модуля ES6".

Чтобы минимизировать файл пакета, попробуйте uglifyjs-webpack-plugin (если вы повторно использовать webpack) или минифицировать (если вы используете browserify)

person haotang    schedule 26.07.2017
comment
это не означает импорт модуля node.js, это просто означает импорт модуля. Это часть ECMAScript 6, а не Node.js. - person nem035; 26.07.2017
comment
Я это понимаю, но в случае с React babel преобразует его в require nodejs. Но спасибо за вашу идею. Обновите его сейчас. - person haotang; 26.07.2017
comment
Не обязательно. Это зависит от настроек Babel. Babel — это просто деталь реализации, не меняющая смысла синтаксиса import или его поведения. Кроме того, модули доступны изначально, поэтому мы даже не нужен бабель. - person nem035; 26.07.2017
comment
Приятно знать вашу информацию! Спасибо. Но я боюсь, что он нам все еще понадобится в ближайшие годы для поддержки некоторых старых браузеров, к сожалению :( - person haotang; 26.07.2017
comment
да, но это не относится к делу, моя цель заключалась в том, чтобы объяснить, почему говорить об импорте модуля nodejs неправильно :). Все, что означает этот синтаксис, это то, что вы импортируете модуль, вы не можете с уверенностью знать, как система сборки пользователя перенесет его или даже перенесет ли. - person nem035; 26.07.2017
comment
Согласен, спасибо @nem035 за помощь в понимании работы babel :D - person haotang; 26.07.2017
comment
рад помочь дружище :) - person nem035; 26.07.2017

arrow_upward
0
arrow_downward

Импортируемое имя не совпадает с именем компонента, который вы экспортируете.

Когда вы импортируете компонент в общий файл Index.js и импортируете компонент (импортируйте заголовок из './components/Header';).

Заголовок должен отличаться от экспортируемого по умолчанию headerComponent; название

person Rohit Jangid    schedule 29.07.2017