Estoy tratando de crear un componente de confirmación reutilizable que represente un botón y, cuando se haga clic, debería abrir un cuadro de diálogo de interfaz de usuario de material. El componente de botón se pasa como accesorio para el componente de confirmación
<Confirmation component={() => <MUIButton>Click me</MUIButton>} />
El componente principal se ve así
const Confirmation = ({ component: Component }) => { const handleClick = () => { ...logic to open the dialog... } return ( <> <Component onClick={handleClick} <-- how to trigger this? /> <Dialog /> </> ) } Ahora, ¿cómo podría hacer que esto funcione sin tener que especificar onClick en el componente del botón pasado? Para esta situación, se puede suponer que el componente que se pasa como accesorio siempre es una especie de botón.
<Confirmation component={() => ( <MUIButton onClick={...logic} <-- don't want to have to specify this > Click me </MUIButton> ) />¿O me estoy acercando a esto desde una perspectiva equivocada? ¿Debería resolverse esto pasando el botón como un niño? Como en
<Confirmation> <MUIButton> Click me </MUIButton> </Confirmation>y ¿cómo sería la implementación en esta situación?
¡Gracias de antemano!
Terminé resolviendo esto creando un componente de orden superior como lo sugirió John
const withConfirmation = (WrappedComponent) => { return (props) => { return ( <> <WrappedComponent // Overrides the possible onClick logic passed as a prop onClick={ ...dialog opening logic } {...props} /> <Dialog> ... </Dialog> </> ); }; }; const Confirmation = withConfirmation(MuiButton) <Confirmation>Clicking me opens a dialog</Confirmation>