【React】onClickを使ったイベント処理に共通処理を割り込ませたい

聞きたいこと

プロジェクト全体で使用しているbuttonコンポーネントなどのonClick()イベントに下記のevent()のような共通処理を割り込ませる方法を探しております。
最終的には各コンポーネントで使用するbuttonのonClickにevent()の処理が埋め込まれている状態にしたいです。
自分で調査した結果、以下の2種類の方法を見つけましたが、割り込ませたいイベントの処理にも依存するとは思いますが、どちらの手法がベターなのか皆さんをご意見をお聞きしたいです。
また、間違っているor不足している点などがございましたら、ご教授いただけますと幸いです。

javascript
1const event = (props: HogeType): void => {
2  // ここでpropsを外部に送信する
3}
4
5// クリックされたときにidなどをevent()に渡して実行したい。これを共通化したい。
6<button id="hogehoge">Done</button>

1. buttonコンポーネントのカスタムコンポーネントを作成する

カスタムコンポーネントの使用を義務付けるのはイケてないですし、既存のbuttonも書き換える必要があって実装量が増えてしまうという懸念点があります。。。

2. 渡されたbuttonコンポーネントのonClickに`①`のような処理を追加して返すHOCを作成する

HOCを使ったことがなく、知識不足は否めませんが今回のような横断的関心事には良さそうでは？と思い候補に挙げています。

バージョン

json
1"react": "^16.13.1",
2"typescript": "^3.9.2"

maisumakun

2021/05/19 10:48

したいことは、ログを表示する「だけ」ですか？（イベントオブジェクトに細工をするなど、やりたいことによっては適切な手段が違ってくることが考えられます）

m-88888888

2021/05/19 10:59

早速のご回答ありがとうございます。すみません、やりたいことのサンプルが余りにも簡素・稚拙すぎました。もっと具体的な例でいうと、以下のような引数を受け取る関数を`onClick`で実行させたいです。また、この関数にはbuttonコンポーネントのidなどをpropsを渡したいと考えています。 ```javascript const event = (props: HogeType): void => { // ここでpropsを外部に送信する } // クリックされたときにidをevent()に渡して実行したい。これを共通化したい。 <button id="hogehoge">Done</button> ```