在 React 的不同页面中渲染相同的组件两次

Rendering same component twice in different pages in React

本文关键字：组件 两次 React      更新时间：2023-09-26
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"函数。

相关文章：