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 和 React 非常陌生。我有上面的代码,我试图渲染相同的 react 组件两次,但在不同的页面上。 ids = imageHeaderIndex 和 navBarIndex 属于index.html,其余属于另一个页面(stats.html)
但是,这些组件不会反射(reflect)在 stats.html 上。我遇到了错误:未捕获的不变违规:_registerComponent(...):目标容器不是 DOM 元素。有人知道为什么吗?
最佳答案
使用 React
时这不是正确的方法。当您“以组件的方式思考”时,实际的应用程序需要结构。一项建议是容器组件,如果需要,它可以管理状态并将其传递下去。无论如何,为什么不将一个组件传递给 ReactDOM.render
,类似这样
(注意:我不知道应用程序的结构,这是一个示例)
//一个带有 id="main"
的 HTML 元素,一个名为 <App />
的 React 容器:
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”函数。
关于javascript - 在 React 的不同页面中渲染同一组件两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38386920/