Tengo el siguiente código para un botón en mi ReactApp para abrir una nueva ventana con un tamaño específico:
<button type="button" style={{ height: '20px', width: '50px' }} className="btn btn-primary" onClick={() => { window.open( "", "Popup", "width=975, height=92, top=30" ); }} />Quiero cargar otro componente cuando el usuario haga clic en el botón. ¿Cómo puedo lograr eso? Intenté cargar el componente y luego usarlo de la siguiente manera, pero no funcionó:
import component from "./component" <button type="button" style={{ height: '20px', width: '50px' }} className="btn btn-primary" onClick={() => { window.open( "{<component />}", "Popup", "width=975, height=92, top=30" ); }} />Cuál sería la mejor forma de hacer esto?
Aquí está mi componente:
export default function component(props) { return ( <div className="container"> <div className="cabinet"><img src={image} /> <div className="devices"> <img src={image2} /> </div> </div> ); }Agregue un estado en la página principal y páselo al componente
const [open, setOpen] = useState[false]; const onClickHandle = () => { setOpen(true); }; return ( <> <button type="button" style={{ height: '20px', width: '50px' }} className="btn btn-primary" onClick={onClickHandle} /> <component open={open} /> </> );Agregue un nuevo accesorio para controlar el componente.
export default function component(props) { const { open } = props; return ( <> {open && ( <div className="container"> <div className="cabinet"> <img src={image} /> <div className="devices"> {' '} <img src={image2} /> </div> </div> </div> )} </> ); }Usando ganchos de estado y representación condicional, puede cargar un componente de reacción en un botón al hacer clic.
const [visible, setVisible] = React.useState(false); function click(e) { e.preventDefault(); setVisible(true); } return ( <div> <button onClick={(event) => { click(event) }} /> {isVisible && ( <YourComponent /> ) } </div> )