ReactDOM.render() ungelöst

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() funktioniert gut mit 'reagieren-dom' für die Entwicklung. Sobald ich versuche, minimized 'react-dom.min' anstelle von 'react-dom' zu importieren, wird render() ungelöst und nichts passiert. Ich kann render() auch nicht aus content assist (ctrl + space) finden.

Ich habe react@15.6.1 und react-dom@15.6.1 mit npm installiert und sie sind auf 'npm list'. Dann habe ich versucht, sie neu zu installieren, aber das hat nicht funktioniert.

Answer 1

Nicht-Modul

Node-Module geladen mit erfordern/Import ein Export Objekt mit allem auffüllen muss, dass das Modul zu veröffentlichen will.

stackoverflow.com/a/14914442/6836839

react-dom.min.js als einfache js Bibliothek verwendet wird, können Sie nicht import/require

Installieren

Da Sie nicht/Import benötigen können, müssen Sie es laden als normales js Skript:

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

Verwenden

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

Hinweis

Wenn Sie von einem Tag Reagieren laden, diese Top-Level-APIs sind auf der ReactDOM global verfügbar.

Wenn Sie ES6 mit npm verwenden, können Sie schreiben Import:

import ReactDOM from 'react-dom' 

Wenn Sie ES5 mit npm verwenden, können Sie schreiben:

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

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

Answer 2

In Ihrem Fall, Sie müssen import ReactDOM from 'react-dom' verwenden, weil importnicht bedeutet " Datei-Import ", es bedeutet " ES6-Modul-Import ".

Um die Bundle-Datei minify, versuchen uglifyjs-webpack-plugin oder minifyify (wenn Sie webpack verwenden) (wenn Sie browserify verwenden)

Answer 3

Importname nicht gleich der Komponentennamen, die Sie exportieren.

Wenn Sie Importieren eine Komponente in einer gemeinsamen Index.js Datei und Sie eine Komponente importieren (Import von Kopf './components/Header';).

Header sollte sich von Export Standard unterscheiden headerComponent; Name