エラーの修正方法：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。エラー？

Webpackを使用してプロジェクトをコンパイルしました。しかし、ときに私は私のhtmlを起動し、私の背景色を表示したが何も唯一、私はコンソールで次のエラーを取得する：エラーの修正方法：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。エラー？

Error: _registerComponent(...): Target container is not a DOM element.

これは私のHTMLです：

<!doctype html> 
<html lang="en"> 
    <head> 
    <script src="public/bundle.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="cssWEB.css"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    </body> 
</html>

そして、私のJS：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Element, scroller} from 'react-scroll'; 


const Component = React.createClass({ 
    componentDidMount: function() { 
     scroller.scrollTo('myScroller', { 
      duration: 1500, 
      delay: 500, 
      smooth: true 
     }); 
    }, 

    render: function() { 
     return (
      <div> 
       <link rel="stylesheet/less" href="style.less" type="text/css" /> 
       <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script> 
       <link type="text/javascript" href="jscode.js"></link> 


       <header> 
       My Page 
       </header> 

       <body ng-app="App"> 
       <div class="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}> 
        <div class="front"><span>Resume</span></div> 
        <div class="back"></div> 
        <div class="top"></div> 
        <div class="bottom"></div> 
        <div class="left"></div> 
        <div class="right"></div> 
       </div> 

       <div class="wrap2"> 
        <div class="cube" change-background> 
        <div class="front" colorcode="#f45642"><span>Work</span></div> 
        <div class="back"></div> 
        <div class="top"></div> 
        <div class="bottom"></div> 
        <div class="left"></div> 
        <div class="right"></div> 
        </div> 
       </div> 

       <div class="wrap3"> 
        <div class="cube" change-background> 
        <div class="front" colorcode="#f45642"><span>Contact</span></div> 
        <div class="back"></div> 
        <div class="top"></div> 
        <div class="bottom"></div> 
        <div class="left"></div> 
        <div class="right"></div> 
        </div> 
       </div> 
       </body> 

       <Element name="link1"> 
       <div class="bg2" id="linkhere"></div> 
       </Element> 

       <div class="slide1"> 
       </div> 

       <div class="slidechild1"> 
       <div class="centerbox"> 
       <div class="center"> 
       <ul> 
        <li ng-click="clicked2()" id="B1">aa</li> 
        <li id="B2">cc.i</li> 
       </ul> 
       </div> 
       </div> 
       </div> 
      </div> 

     ); 
    } 
}); 

ReactDOM.render(
    <Component />, 
    document.getElementById("root") 
);

このエラーが発生しているコードで何が問題になっていますか？

出典

2017-01-29 feners

document.getElementById("root")は、ドキュメントが読み込まれた後にDOM要素を返すため、DOM要素が作成される前にスクリプトが実行されていることがわかります。

HTMLを確認するとこれが確認されます。 bundle.jsを先頭にロードしますが、その時点でドキュメント本体がロードされていません。

この問題を解決するには、スクリプトタグをdiv要素の下に移動して、スクリプトが実行されるまでに要素が作成されていることを確認します。

<!doctype html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="cssWEB.css"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script src="public/bundle.js" type="text/javascript"></script> 
    </body> 
</html>

出典

2017-01-29 18:32:03 grovesNL

すごい説明+1 –

document.querySelectorの代わりのdocument.getElementById

出典

2017-06-19 15:13:24 bagongkia

を試してみて、私は同じ問題に直面し、私の状況のための問題を解決する以下：

私は（レンダリングロードするためにjQueryのレディ機能を使用）関数。また、body.jsスクリプトを本体の最後に置き、延期として指定しました。私は、サーバーからリアクトの結果を注入するために、ここでハンドルバーを使用しています

$(function() { 
    render(<App />, document.getElementById('main')); 
});

（FYI問題とは何の関係もありません）：

<body> 
    <div id="main">{{{markup}}}</div> 

    <script src="/bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="/bower_components/tether/dist/js/tether.js"></script> 
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="../../static/bundle-main.js" defer></script> 
    </body>

私のレンダリング機能を以下に示します。

これはどうしてですか？ DOMスクリプトが完全にレンダリングされる前にバンドルスクリプトがロードされるので、スクリプトは要素を見つけることができません。たとえば、<div id='main'></div>とします。遅延を指定すると、ページがレンダリングされた後にスクリプトがレンダリングされます。レンダリング関数をjQueryの準備関数の中に入れておくと、レンダリング関数がDOM対応で実行されるようになります。

この回答があなたの問題を解決することを願っています。

出典

2017-08-24 09:28:18

エラーの修正方法：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。エラー？

答えて

関連する問題