ReactDOM.unmountComponentAtNode: Uncaught ReferenceError: ReactDOM не определен

Question

я практикую реагировать
я встретил эту ошибку: Uncaught ReferenceError: ReactDOM is not defined
когда тип ReactDOM.unmountComponentAtNode(document.body) на хромированной консоли

Пожалуйста, помогите мне проверить проблему
Стараюсь код на JSbin и работает хорошо, поэтому я думаю, что это проблема с webpack, но я понятия не имею.

И я замечаю, что есть много способов написать React.render часть, когда я google, какая разница? какой из них правильный??

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

Answer 1

ReactDOM доступны с 0.14.0, так

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

должно быть хорошо. Если вы используете более низкую версию React, то React.render

Во-вторых, рекомендуется не делать рендеринг на document.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.

Answer 2

Существует только один способ сделать React компонент в браузере, и это одно:

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

Все остальные являются устаревшими - renderComponent переименован в render и переехал из react пакета react-dom пакета.

Кроме того, вам необходимо позвонить unmountComponentAtNode в ваш жизненный цикл componentWillUnmount? В вашем конкретном случае это не имеет смысла. React будет отключать компонент для вас - бесплатно.

componentWillUnmount обычно служит для очистки тайм-аутов/интервалов и/или отмены асинхронных операций (обещание, закрытие соединений, ...);

Удаление этого вызова не повредит вам, попробуйте его.