Tengo un componente muy complejo que lleva mucho tiempo renderizar 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.
Por lo tanto, primero me gustaría renderizar previamente este componente en la ventana principal, luego, simplemente mueva el componente renderizado a la ventana secundaria al hacer clic en el botón, lo que podría mejorar el rendimiento ya que todo se ha renderizado.
A continuación se muestra el componente que quiero renderizar previamente y que podría tener algunos subcomponentes:
export default observer(function MyComp(props: MyCompProps) { ... return ( <div>Some complex sub components</div> ); });Me pregunto si hay una manera de hacer eso. Cualquier sugerencia sería apreciada.
Recuerda que React tiene una regla, todos los componentes deben tener la primera letra mayúscula.
Sobre su duda, puede usar el gancho useState() para establecer el valor del componente en falso y solo cuando hace clic en el botón que se abre dentro de la ventana que desea.
export default observer(function MyComp(props: MyCompProps) { const [isOpenComponent, setIsOpenComponent] = useState(false); function handleOpen() { setIsOpenComponent(true); } return ( <div> <div>Some complex sub components</div> <div isOpenComponent> Component that you want to open</div> <button type="button" onClick={handleOpen}>Open Component</div> </div> </div> ); });Esto es solo una idea para implementar su caso.