在 React 的不同页面中渲染相同的组件两次
Rendering same component twice in different pages in 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 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)
但是,这些组件不会反映在统计数据.html上。我遇到了错误:未捕获的不变违规:_registerComponent(...):目标容器不是 DOM 元素。有人知道为什么吗?
在使用 React
时,这不是正确的方法。当您"在组件中思考"时,实际的应用程序需要结构。一个建议是容器组件,如果需要,它可以管理状态并将其传递下来。无论如何,为什么不有一个组件传递给ReactDOM.render
,类似这样
(注意:我不知道应用程序的结构,这是一个例子)
一个带有id="main"
的HTML元素,一个叫做<App />
的React Container:
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"函数。
相关文章:
- Meteor Router数据函数被调用两次
- 从MySQL数据库中获取输入数据需要两次页面刷新
- Module.start()已激发两次
- Jquery点击事件必须点击两次
- Append元素在运行两次函数后不显示
- 防止双击执行两次jQuery post请求
- 我必须点击两次才能激活任何按钮操作(离子/角度)
- 单击jQuery会激发两次
- 如何避免在树上走两次
- button.单击两次删除附加操作后不工作
- 如果我两次使用相同的反应/冗余组件,它们会共享状态吗?
- 反应组件调用了两次(AJAX调用异步)
- 反应.js - 组件将接收道具被击中两次
- 反应/回流数据流:DOM 中一个组件两次
- Angular组件构造函数被调用两次
- React -防止生命周期组件渲染相同的数据两次:WillReceiveProps &componentDidMount
- 为什么我的React组件渲染调用两次,一次没有数据,然后有数据,但太晚的例外
- 当两次调用一个方法时,仅呈现一个SVG组件
- 在 React 的不同页面中渲染相同的组件两次
- JQuery在加载react js组件数据时触发两次滚动