Recién comencé a aprender a reaccionar JS. Entonces, solo quería saber si podríamos representar elementos de múltiples archivos JS en el nodo raíz en React JS. Si es así, ¿cómo? y si no, ¿por qué?
Por ejemplo, yo estaba tratando de hacer esto
En index.js
import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; import Counter from './components/counter'; const x="one"; const y=<div><h2>Zero, {x}</h2><h1>{x=="one"?"two":"three"}</h1></div> ReactDOM.render(y,document.getElementById('root'));En uno.js
import react from 'react'; import React from 'react'; import ReactDOM from 'react-dom'; const a="def"; const b="abc {a}"; ReactDOM.render(b,document.getElementById('root'));Pero la salida en el navegador fue solo
cero, uno dos
El index.js sirve como un archivo raíz donde todos los componentes se reducen a un solo componente principal (generalmente es el App.js ) que luego se inyecta en el DOM real. Aunque no puede renderizar varios componentes en el nodo raíz debido a cómo funciona React, es posible, sin embargo, renderizar varios componentes adyacentes al nodo raíz. Esto podría lograrse utilizando el método createPortal en el objeto ReactDOM . En primer lugar, cree nodos adyacentes a los nodos raíz en index.html .
<div id='root'></div> <div id='adjacent'></div> <!-- Adjacent node to the root node by the id adjacent --> Agregue el componente que se representará como un nodo adyacente en el componente raíz (normalmente App.js ).
Aplicación.js
export default function App(){ return( ReactDOM.createPortal(<ComponentToBeRenderedAdjacentToRootNode/>,document.getElementById('adjacent')); <ComponentToBeRenderedInRootNode/> ) } Cuando ejecute la aplicación e inspeccione la página web, la estructura DOM se verá así.
HTML del navegador
<html> <head> ... </head> <body> <div id='root'> Root component and it's children components rendered here</div> <div id='adjacent'> ComponentToBeRenderedAdjacentToRootNode and it's children components rendered here</div> </body> </html>