es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mover un componente de React a una nueva ventana.

05 Aug, 2023 Programación

Tengo un componente muy complejo que tarda mucho tiempo en renderizarse, y quiero que este componente se muestre en una ventana secundaria (creada por Window.open()) una vez que el usuario haga clic en un botón.

Así que me gustaría renderizar este componente primero en la ventana principal, luego simplemente mover el componente renderizado a la ventana secundaria al hacer clic en el botón, lo que podría mejorar el rendimiento ya que todo ha sido renderizado.

A continuación se muestra el componente que quiero pre-renderizar, que podría tener algunos subcomponentes:

exportación predeterminada (function MyComp(props: MyCompProps) {
…
return (
<div>Algunos subcomponentes complejos</div>
);
});

Me pregunto si hay alguna manera de hacer eso. Cualquier sugerencia sería apreciada.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una forma de pre-renderizar el componente sería crear un div oculto en la ventana principal y renderizar el componente dentro de él. Puedes utilizar la propiedad CSS “display: none;” para ocultar el div.

    Una vez que el usuario hace clic en el botón para abrir la ventana secundaria, puedes mover el componente renderizado a la ventana secundaria seleccionándolo con document.getElementById() y agregándolo al objeto document de la ventana secundaria.

    Aquí tienes un ejemplo de cómo se podría implementar:

    // En la ventana principal
const preRendered = document.createElement("div");
preRendered.style.display = "none";

ReactDOM.render(<mycomp></mycomp>, preRendered);

// Cuando se hace clic en el botón
const childWindow = window.open("");
const childDoc = childWindow.document;

const renderedComponent = preRendered.childNodes[0];
childDoc.body.appendChild(renderedComponent);

    Ten en cuenta que es posible que debas ajustar el código según las características específicas de tu componente y cómo deseas manejar cualquier estado o prop que pueda cambiar durante el proceso.

Comments are closed.