ReactDOM.unmountComponentAtNode：未捕获的ReferenceError：ReactDOM没有定义

我练习反应
我遇到了这个错误：Uncaught ReferenceError: ReactDOM is not defined
当铬控制台类型ReactDOM.unmountComponentAtNode(document.body)ReactDOM.unmountComponentAtNode：未捕获的ReferenceError：ReactDOM没有定义

请帮我查一下这个问题
我试穿的代码JSbin和运行良好，所以我认为这是webpack的问题，但我不知道。

而我注意到有很多方法写React.render部分当我谷歌，有什么区别？哪一个是正确的？

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

这里是我的代码：

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

来源

2016-04-26 user2492364

ReactDOM自0.14.0可用，所以

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

应该罚款。如果您使用的是较低版本的React，则React.render

其次，建议不要在document.body上渲染，而应在body内部创建div并在其中渲染。

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

当您使用Webpack时，React和ReactDOM将不可用于全局。所以，这段代码只能在您导入React & ReactDOM的文件/模块内部工作。

来源

2016-04-26 08:59:46

谢谢。我明白了你的观点。如果我在我的代码中使用'setTimeout（（）=> {0} {} {}}。它运作良好！谢谢 – user2492364

只有一种呈现方式做出反应在浏览器中的组件，它是这样的：

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

所有其他已弃用 - renderComponent被重命名为render和react包移到react-dom包。

此外，您是否需要在您的componentWillUnmount生命周期方法中致电unmountComponentAtNode？在你的具体情况下，这是没有意义的。 React将免费为您卸载组件。

componentWillUnmount通常用于清除超时/间隔和/或取消异步操作（承诺，关闭连接，...）;

删除该通话不会对您造成伤害，请尝试一下。

来源

2016-04-26 08:56:43 Andreyco

谢谢。我使用''''setTimeout（（）=> {ReactDOM.unmountComponentAtNode（document.getElementById（'app'））;}，10000）;''''在我的代码中。它运作良好！ – user2492364

ReactDOM.unmountComponentAtNode：未捕获的ReferenceError：ReactDOM没有定义

回答

相关问题