Estaba haciendo un página donde necesitaba que ciertas partes fueran dinámicas pero la mayor parte de ella era estática por lo que la idea de hacer una webapp para ello no me parecía lo más eficiente.
Basicamente era una página con contenido estático y 3 componentes dinámicos, así que decidí porbar con React.render
ReactDOM.render(<Componente1 />, domEl1);
ReactDOM.render(<Componente2 />, domEl2);
ReactDOM.render(<Componente3 />, domEl3); funciona y cumple el objetivo pero luego aprendí de contextos y redux y la cosa ya no era tan simple ya que este tipo de conceptos se implementan como componentes containers para delimitar el contexto
<Contexto>
<Componente1 />
<Componente2 />
<Componente3 />
</Contexto>lo cual aplicado a la solución anterior
ReactDOM.render(<Contexto><Componente1 /></Contexto>, domEl1);
ReactDOM.render(<Contexto><Componente2 /></Contexto>, domEl2);
ReactDOM.render(<Contexto><Componente3 /></Contexto>, domEl3);Lo cual no me tomé el tiempo en verificar si funcionaba, simplemente no se veía bien. Buscando una respuesta me tope con este post donde mantenian un único contexto y cada componente se dibujaba en su respectivo nodo, todo hecho con la funcionalidad de portals
function Main() {
const portal1 = ReactDOM.createPortal(
<Componente1 />,
domEl1
);
const portal2 = ReactDOM.createPortal(
<Componente2 />,
domEl2
);
const portal3 = ReactDOM.createPortal(
<Componente3 />,
domEl3
);
return (
<Contexto>
{portal1}
{portal2}
{portal3}
</Contexto>
)
}
ReactDOM.render(
<Main />,
document.getElementById('root'),
)Posts relacionados
Similares
| < | > |
De la categoría: dev++
| < | > |
