2016-07-15 151 views
1
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非常陌生並且作出反應。我有上面的代碼,我試圖呈現相同的反應組件兩次,但在不同的頁面上。 ids = imageHeaderIndex和navBarIndex屬於index.html,而其餘屬於另一個頁面(stats.html)在React的不同頁面渲染相同的組件兩次

但是,這些組件不反映在stats.html上。我遇到了以下錯誤:Uncaught Invariant Violation:_registerComponent(...):目標容器不是DOM元素。任何人都知道爲什麼?

回答

1

React一起使用時,這不是正確的方法。當你在「考慮組件」時,實際的應用需要結構。一個建議是容器組件,如果需要的話,它可以管理狀態並將其傳遞下去。不管怎麼說,爲什麼不把你傳遞到ReactDOM.render一個組成部分,像這樣

(注:我不知道該應用程序的結構,這是一個例子)

//一個HTML元素id="main",一個作出反應容器調用<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); 

理想情況下,你只有每個文件一個`ReactDOM.render」功能。

+0

嗨,我應該如何去做,如果我只有一個「ReactDOM.render」功能每個文件? @JordanHendrix – nana

相關問題