

react,typescriptでMUIを用いたソフトを開発しています。  
その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。  
普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して～となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。  
ButtonとPopoverの内容を任意に指定できるうえで再利用できる実装を探っているのですが、綺麗な形になりません。

今まで試したことを以下のCodeSandBoxに纏めています。  
<https://codesandbox.io/s/popoverideas-yh5jz5?file=/src/panel5.tsx>  
Panel1：素直に実装した場合  
Panel2：カスタムフックにした場合  
Panel3: Contextで実装した場合1  
Panel4：Contextで実装した場合2  
Panel5: 高階(HOC)コンポーネントで実装した場合  
となっています。

今の所Panel3,4の「Contextでレンダリングし、その制御用の関数を提供する」形が良いかと思っていますが、Reactの流儀に合ってない気もします。  
何かいい方法はないでしょうか？できればDialogも同じようにしたいです。


CC BY-SA 4.0
2023-10-16T08:11:59.923
96501
2023-10-16T09:26:45.090
2023-10-16T09:26:45.090
57530
57530
question
reactjs typescript material-ui
react,muiで汎用性の高いButton+Popoverを作りたい