javascript - React コンポーネントの状態を取得してグローバルな保存ボタンを実装する方法

Question

Reacts 機能コンポーネント スタイルを使用して、再利用可能なテーブルのようなコンポーネントを開発します。テーブルは、React.useReducer を使用してその状態を保持、管理、および検証します。各行には、行/テーブルの状態を変更するためのいくつかの入力フィールド、チェックボックス、およびアクション ボタンがあります。

これで、GUI の別の場所 (テーブルの子ではない) に保存ボタンができました。状態をテーブルから取得して、(他のデータと共に) 永続化のために REST-Endpoint に送信できるようにするにはどうすればよいでしょうか?

私たちの実際の解決策は、テーブルの小道具として設定されるコールバック関数です。この関数は、現在の状態のコピーを公開するために各レンダリング後に table-component 内から呼び出されます。このコールバック関数の所有者は、このデータを取得して保持し、Save-Button のスコープで使用できるようにします。

function ComponentWrapper(props)
{
    const dataRef = React.useRef(props.initialData);

    function onDataUpdate(newData) {
        dataRef.current = newDate;
    }
    
    function saveData() {
        // send dataRef.current to REST-Endpoint
    }
    
    return (
        <div>
            <MyTable onDataUpdate={onDataUpdate}></MyTable>
            ...
            <button onClick={(e) => sendData()} name="save">Save</button>
        </div>
    );
}
    
function MyTable(props)
{
    const [state, dispatch] = useReducer(..., props.initialData)

    // ... some code to dispatch state changing actions

    useEffect(() => {
        const copyOfState = { ...state }
        props.onDataUpdate(copyOfState);
    });
   
    return (
        // table markup goes here ...
    );
}

これは実際に機能しますが、そのようなユースケースにはもっと良い方法があると考えています。テーブルは再利用可能である必要があり、保存ボタンは GUI のまったく別の場所 (ツールバーやメニューなど) に配置される可能性があるため、テーブルから ComponentWrapper に状態を持ち上げたくありません。

これに関するアイデアはありますか？前もって感謝します。