ReactDOM.unmountComponentAtNode：キャッチされないにReferenceError：タイプ<code>ReactDOM.unmountComponentAtNode(document.body)</code><p> </p>クロームコンソールには、私は上のコードを試し、問題<br> を確認して助けてくださいとき<code>Uncaught ReferenceError: ReactDOM is not defined</code><br> ：ReactDOMは私が練習

Question

が定義されていないが、私はこのエラーを満たし
を反応させます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' 
}; 

Answer 1

0.14.0以降で利用可能ReactDOM、そう

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

は問題ないはずです。 Reactの下位バージョンを使用している場合React.render

第2に、body.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をインポートしたファイル/モジュール内でのみ機能します。

Answer 2

リアクトレンダリングするための唯一の方法がありますブラウザのコンポーネントであり、このコンポーネントです：

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

他のすべてが廃止されました - renderComponentはrenderに改名し、react-domパッケージにreactパッケージから移動しました。

また、componentWillUnmountライフサイクルの方法でunmountComponentAtNodeに電話する必要がありますか？あなたの特別な場合、それは理にかなっていません。 Reactはあなたのためにコンポーネントをアンマウントします - 無料です。

componentWillUnmountは、通常、タイムアウト/間隔のクリア、および/または非同期操作のキャンセル（プロミス、クローズ接続など）に役立ちます。

その呼び出しを削除しても、あなたを害することはありません。試してみてください。