Tengo que extender la funcionalidad onClick predeterminada en el botón. Si un usuario hace clic en él, el onClick del usuario debería activarse, pero también tengo que extenderlo activando mi propia función con el onClick del usuario.

He intentado dos enfoques

1. Con HOC
2. React.clonElement

I'm not able to figure out which one to choose. Why choose one over the other? Which one is efficient?

Demo en vivo

Aplicación.jsx

 import "./styles.css"; import Wrap from "./Wrap"; import EnhancedButton from "./Button"; export default function App() { function defaultOnClick() { console.log("default on click"); } return ( <div className="App"> <Wrap> <button onClick={defaultOnClick}> count </button> </Wrap> <EnhancedButton onClick={defaultOnClick}> click from enhanced button </EnhancedButton> </div> ); }

Botón.jsx

 import React from "react"; import HOC from "./HOC"; function Button({ children, onClick }) { return <button onClick={onClick}>{children}</button>; } export default HOC(Button);

Envolver.jsx

 import React from "react"; export default function WrapWithOnclick(props) { const { children } = props; function customWrapOnclick() { console.log("customWrapOnclick"); } return ( <> {React.Children.map(children, (child) => { return React.cloneElement(child, { onClick: (e) => { customWrapOnclick(e); child.props.onClick && child.props.onClick(e); } }); })} </> ); }

HOC.jsx

 export default function HOC(Component) { return function ModifiedComponent(props) { const { children, onClick: hocOnClick, ...rest } = props; function customHOCOnclick() { console.log("customHOCOnclick"); } return ( <> <Component onClick={(e) => { customHOCOnclick(e); hocOnClick && hocOnClick(); }} {...rest} > {children} </Component> </> ); }; }