私のindex.jsでreactを使ったレンダリングがありません

ナビゲーション、ヘッダなど、私の1ページのアプリケーション用の静的なHTMLをいくつか作成しましたが、この静的なHTMLの中の 'content_wrapper' divの中にいくつかのコンテンツをレンダリングしたい私はこのコンソールエラーを取得します。ここで私のindex.jsでreactを使ったレンダリングがありません

invariant.js:44 Uncaught Error: _registerComponent(...): Target container is not a DOM element.

は、私はあなたが反応する新しいと思います私のindex.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Router, Route, hashHistory, browserHistory} from "react-router"; 
import "./index.css"; 

var SideBar = React.createClass({ 
    render() { 
     return (
      <html> 
      <head> 
       <title>Football Prototype</title> 
      </head> 
      <div> 
       <header class="navbar navbar-fixed-top navbar-shadow"> 
        <div class="navbar-branding"> 
         <a class="navbar-brand" href="dashboard"> 
          <b>Shire</b>Soldiers 
         </a> 
        </div> 
        <form class="navbar-form navbar-left navbar-search alt" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search..." 
            value="Search...">Search</input> 
         </div> 
        </form> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown menu-merge"> 
          <span class="caret caret-tp hidden-xs"></span> 
         </li> 
        </ul> 
       </header> 

       <aside id="sidebar_left" class="nano nano-light affix"> 

        <div class="sidebar-left-content nano-content"> 

         <ul class="nav sidebar-menu"> 
          <li class="sidebar-label pt20">Menu</li> 
          <li class="active"> 
           <a href="/dashboard"> 
            <span class="glyphicon glyphicon-home"></span> 
            <span class="sidebar-title">Dashboard</span> 
           </a> 
          </li> 
          <li> 
           <a href="/fixtures"> 
            <span class="fa fa-calendar"></span> 
            <span class="sidebar-title">Fixtures</span> 
           </a> 
          </li> 
         </ul> 

        </div> 

       </aside> 
       <body> 
        <section id="content_wrapper"> 

        </section> 
       </body> 
      </div> 
      </html> 
     ) 
    } 
}); 

var destination = document.querySelector("#content_wrapper"); 

ReactDOM.render(
    <div> 
     <SideBar/> 
    </div>, 
    destination 
);

出典

2017-01-25 Nick Pocock

「＃content_wrapper」は_inside_あなたの反応コンポーネントです。 'destination'は_既存のDOMノードである必要があります。 –

ページ全体をJSXに入れて、*同じJSX *にレンダリングしようとすることはできません。 'ReactDOM.render'を使ってコンポーネントをマウントするための既存のDOM要素が必要です。 –

コンテナdivなどで別のJSファイルを作成しますか？例はありますか？ありがとう –

コンポーネントが存在しないコンテナにレンダリングしようとしています。関数を呼び出す前に、ReactDOM.renderに指定するコンテナが存在している必要があります。したがって、HTMLテンプレートを用意する必要があります。 Reactはコンポーネントベースなので、メニューの各部分（ここでやっていると思います）のコンポーネントを作成する必要があることを覚えておいてください。十分ですので、私はちょうどあなたをコピーしたメニュー

var SideBar = React.createClass({ 
    render() { 
     return (
      <html> 
      <head> 
       <title>Football Prototype</title> 
      </head> 
      <div> 
       <header class="navbar navbar-fixed-top navbar-shadow"> 
        <div class="navbar-branding"> 
         <a class="navbar-brand" href="dashboard"> 
          <b>Shire</b>Soldiers 
         </a> 
        </div> 
        <form class="navbar-form navbar-left navbar-search alt" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search..." 
            value="Search...">Search</input> 
         </div> 
        </form> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown menu-merge"> 
          <span class="caret caret-tp hidden-xs"></span> 
         </li> 
        </ul> 
       </header> 

       <aside id="sidebar_left" class="nano nano-light affix"> 

        <div class="sidebar-left-content nano-content"> 

         <ul class="nav sidebar-menu"> 
          <li class="sidebar-label pt20">Menu</li> 
          <li class="active"> 
           <a href="/dashboard"> 
            <span class="glyphicon glyphicon-home"></span> 
            <span class="sidebar-title">Dashboard</span> 
           </a> 
          </li> 
          <li> 
           <a href="/fixtures"> 
            <span class="fa fa-calendar"></span> 
            <span class="sidebar-title">Fixtures</span> 
           </a> 
          </li> 
         </ul> 

        </div> 

       </aside> 
       <body> 
        <section id="content_wrapper"> 

        </section> 
       </body> 
      </div> 
      </html> 
     ) 
    } 
});

ため

HTML

<html> 
    <head> 
     <!--- links to css or js files here ---> 
    </head>  
    <body> 
     <div id="root"> 
     </div> 
     <!--- You can add here the link to your component/s ---> 
     <srcipt src=path_to_your_script></script> 
    </body> 
</html>

コンポーネント：私は、次のような構造を持っていることをお勧めします。

あなたが一番上に示すコードを使用してのindex.htmlを開いたときにちょうどこのように、それはあなたのコンポーネントのスクリプトをロードし、その後、根」にそれをレンダリング

ReactDOM.render( <div> <SideBar/> </div>, document.querySelector("#root"); );

コンポーネントをレンダリング"

余分：メモリリークのパフォーマンスやものがないようにするには、render in Reactに関するドキュメントを読む必要があります。

これは役に立ちます:)

出典

2017-01-25 09:26:26

私はそれを別々のhtmlファイルとして作成しますか？そのhtmlファイルをコンポーネントにリンクするにはどうしたらいいですか？ –

通常、root.htmlとしてindex.htmlだけを使いたいとします。だから、あなたはそれを別々のファイルに入れなければなりません。私の答えをより具体的に編集します。 –

助けてくれてありがとう –

で、あなたはこのように、独立したHTMLページのindex.htmlを作成する必要があります。

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Football Prototype</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
     </head> 

     <body> 
     <div id="content_wrapper"></div> 
     </body> 
</html>

あなたのコンポーネントの中で、index.htmlページに配置したいhtml本文部分（すべてのロジック、イベント、およびAPIコール）を書いて、このようなコンポーネントを定義してください：

それは動作します

//var destination = document.querySelector("#content_wrapper"); 

ReactDOM.render(
    <div> 
     <SideBar/> 
    </div>, 
    document.querySelector("#content_wrapper"); 
);

：

var SideBar = React.createClass({ 
    render() { 
     return (
      <div> 
       <header class="navbar navbar-fixed-top navbar-shadow"> 
        <div class="navbar-branding"> 
         <a class="navbar-brand" href="dashboard"> 
          <b>Shire</b>Soldiers 
         </a> 
        </div> 
        <form class="navbar-form navbar-left navbar-search alt" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search..." 
            value="Search...">Search</input> 
         </div> 
        </form> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown menu-merge"> 
          <span class="caret caret-tp hidden-xs"></span> 
         </li> 
        </ul> 
       </header> 

       <aside id="sidebar_left" class="nano nano-light affix"> 

        <div class="sidebar-left-content nano-content"> 

         <ul class="nav sidebar-menu"> 
          <li class="sidebar-label pt20">Menu</li> 
          <li class="active"> 
           <a href="/dashboard"> 
            <span class="glyphicon glyphicon-home"></span> 
            <span class="sidebar-title">Dashboard</span> 
           </a> 
          </li> 
          <li> 
           <a href="/fixtures"> 
            <span class="fa fa-calendar"></span> 
            <span class="sidebar-title">Fixtures</span> 
           </a> 
          </li> 
         </ul> 

        </div> 

       </aside> 
      </div> 
     ) 
    } 
});

続いてそれをレンダリングします。

出典

2017-01-25 09:16:27

私のindex.htmlを表示する方法は何ですか？index.htmlページ内のスクリプトタグにそのコンポーネントを配置しますか？ –

私のindex.jsでreactを使ったレンダリングがありません

答えて

関連する問題