Reactの異なるページで同じコンポーネントを2回レンダリング

Question

import React from "react"; 
import ReactDOM from "react-dom"; 

import Pagination from "./components/pagination.js"; 
import Header from "./components/header.js"; 
import DataBox from "./components/stats.js" 

const imageHeaderIndex = document.getElementById("imageHeaderIndex"); 
const navBarIndex = document.getElementById("navBarIndex"); 

const imageHeader = document.getElementById("imageHeader"); 
const navBar = document.getElementById("navBar"); 
const dataDiv = document.getElementById("textualContent"); 

ReactDOM.render(<Header/>, imageHeaderIndex) 
ReactDOM.render(<Pagination/>, navBarIndex) 

ReactDOM.render(<Header/>, imageHeader) 
ReactDOM.render(<Pagination/>, navBar) 
ReactDOM.render(<DataBox url="http://localhost:8081/stats/pageInfo" pollInterval={2000}/>, dataDiv); 

こんにちは、私は非常にjavascriptに反応して反応します。私は上記のコードを持っており、同じ反応コンポーネントを2回、別のページに描画しようとしていました。 ids = imageHeaderIndexとnavBarIndexはindex.htmlに属し、残りは別のページ（stats.html）に属します

ただし、コンポーネントはstats.htmlには反映されません。 Uncaught Invariant Violation：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。なぜ誰が知っていますか？

Answer 1

これは、Reactを使用するときの正しいアプローチではありません。あなたが「コンポーネントを考えている」一方で、実際のアプリは構造を必要とします。 1つの推奨事項はコンテナコンポーネントであり、必要に応じて状態を管理して渡すことができます。 id="main"と

// 1つのHTML要素、：とにかく、なぜあなたはReactDOM.renderに合格つの構成要素、そう

（私はこれは一例であり、アプリの構造を知っていないことに注意してください）のようなものを持っていません1は、コンテナが<App />と呼ばリアクト：

import React from "react"; 
import ReactDOM from "react-dom"; 

import Pagination from "./components/pagination.js"; 
import Header from "./components/header.js"; 
import DataBox from "./components/stats.js" 

const main = document.getElementById("main"); 


const App = React.createClass({ 
    render: function() { 
    return (
     <div id="main"> 
     <Header> 
      <Pagination></Pagination> 
      <Header> 
      <Pagination></Pagination> 
      </Header> 
     </Header> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render(<App url="http://localhost:8081/stats/pageInfo" pollInterval={2000}/>, main); 

理想的には、あなただけのファイルごとに1つの `ReactDOM.render」関数を持っています。