Javascript 在React中的不同页面中呈现同一组件两次 从“React”导入React； 从“react dom”导入react dom； 从“/components/Pagination.js”导入分页； 从“/components/Header.js”导入标题； 从“/components/stats.js”导入数据盒 常量imageHeaderIndex=document.getElementById（“imageHeaderIndex”）； const navBarIndex=document.getElementById（“navBarIndex”）； 常量imageHeader=document.getElementById（“imageHeader”）； const navBar=document.getElementById（“navBar”）； const dataDiv=document.getElementById（“textualContent”）； ReactDOM.render（，imageHeaderIndex） ReactDOM.render（，navBarIndex） ReactDOM.render（，imageHeader） ReactDOM.render（，导航栏） render（，dataDiv）；

大家好，我对javascript和react非常陌生。我有上面的代码，我试图两次呈现相同的react组件，但呈现在不同的页面上。 ids=imageHeaderIndex和navBarIndex属于index.html，而其余属于另一个页面（stats.html）

---

但是，这些组件不会反映在stats.html上。我遇到了错误：未捕获不变冲突：_registerComponent（…）：目标容器不是DOM元素。有人知道为什么吗？

使用

React

时，这不是正确的方法。当你“在组件中思考”时，实际的应用程序需要结构。一个建议是容器组件，如果需要，它可以管理状态并将其传递下去。无论如何，为什么不让一个组件传递到

ReactDOM.render

，类似这样的东西呢

（注意：我不知道应用程序的结构，这是一个示例）

//一个带有

id=“main”

的HTML元素，一个名为

的React容器：

从“React”导入React；
从“react dom”导入react dom；
从“/components/Pagination.js”导入分页；
从“/components/Header.js”导入标题；
从“/components/stats.js”导入数据盒
const main=document.getElementById（“main”）；
const App=React.createClass({
render:function（）{
返回(
)
}
})
render（，main）；

---

理想情况下，每个文件只有一个“ReactDOM.render”函数

嗨，如果每个文件只有一个“ReactDOM.render”函数，我应该怎么做呢@乔丹亨德里克斯

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);

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);