Оказание того же компонента дважды на разных страницах в реакторе

Question

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)

Однако компоненты не отражаются на stats.html. И я столкнулся с ошибкой: Неоткрытое инвариантное нарушение: _registerComponent (...): Целевой контейнер не является элементом DOM. Кто-нибудь знает почему?

Answer 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» каждого файла.