2016-04-26 3 views
0

Ich übe reagieren
ich diesen Fehler erfüllt: Uncaught ReferenceError: ReactDOM is not defined
wenn Typ ReactDOM.unmountComponentAtNode(document.body) auf ChromkonsoleReactDOM.unmountComponentAtNode: Uncaught Reference: ReactDOM definiert nicht

Bitte helfen Sie mir, das Problem
zu überprüfen versuche ich, den Code auf JSbin und funktioniert gut, also denke ich, es ist Webpack-Problem, aber ich habe keine Ahnung.

Und ich merke, es gibt viele Wege schreiben React.render Teil, wenn ich google, was ist der Unterschied? Welches ist korrekt??

React.render(<App name='Vipul' />,document.body); 
ReactDOM.render(<App name='Vipul' />,document.body); 
React.renderComponents(<App name='Vipul' />,document.body); 

Hier ist mein Code:

main.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 

console.log('Start') 
var App = React.createClass({ 
    render: function(){ 
    console.log('render'); 
    return <h1 onClick={this.toggleState}>Hello</h1> 
    }, 
    componentWillUnmount: function(){ 
    //在console執行 ReactDOM.unmountComponentAtNode(document.body) 
    console.log('componentWillUnmount'); 
    }, 

    toggleState: function(){ 
    this.setState({status: !this.state.status}) 
    } 

}); 

ReactDOM.render(<App name='Vipul' />,document.body); 

webpack.config.js

var WebpackNotifierPlugin = require('webpack-notifier'); 

module.exports = { 
    entry: "./src/main.js", 
    output: { 
     filename: "./dist/bundle.js" 
//  filename: "./public/dist/bundle.js" 
    }, 
    plugins: [ 

    new WebpackNotifierPlugin() 

    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: "babel-loader", 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    },devtool: 'source-map' 
}; 

Antwort

1

ReactDOM seit 0.14.0 verfügbar, so

ReactDOM.render(<App name='Vipul' />,document.body); 

sollte in Ordnung sein. Wenn Sie eine niedrigere Version von React verwenden, dann React.render

Zweitens ist es empfehlenswert, nicht auf document.body zu rendern, sondern ein div im Körper erstellen und dort rendern.

I met this error : Uncaught ReferenceError: ReactDOM is not defined when type ReactDOM.unmountComponentAtNode(document.body) on chrome console

Wenn Sie Webpack verwenden, sind React und ReactDOM nicht global verfügbar. Dieser Code funktioniert also nur innerhalb der Datei/des Moduls, in die Sie React & ReactDOM importiert haben.

+0

Danke. Ich habe dich verstanden. Wenn ich '' '' setTimeout (() => { ReactDOM.unmountComponentAtNode (document.getElementById ('app'));}, 10000); '' '' in meinem Code. Es läuft gut!!! Vielen Dank – user2492364

0

Es gibt nur einen Weg Reagieren zu machen ist Komponente im Browser und es ist dies:

ReactDOM.render(<App />, target); 

Alle anderen sind veraltet - renderComponent wird render umbenannt und von react Paket zu react-dom Paket.

Sie müssen auch unmountComponentAtNode in Ihrer Lifecycle-Methode aufrufen? In Ihrem speziellen Fall macht das keinen Sinn. React wird die Komponente für Sie unmounten - kostenlos.

componentWillUnmount dient normalerweise zum Löschen von Timeouts/Intervallen und/oder Abbrechen von asynchronen Operationen (Versprechen, Schließen von Verbindungen, ...);

Das Entfernen dieses Anrufs wird Ihnen nicht schaden, probieren Sie es aus.

+0

Vielen Dank. Ich benutze '' '' setTimeout (() => {ReactDOM.unmountComponentAtNode (document.getElementById ('app'));}, 10000); '' '' in meinem Code. Es läuft gut!!! – user2492364

Verwandte Themen