useRecoilBridgeAcrossReactRoots()

一個 hook，用於協助將 Recoil 狀態與巢狀 React 根與呈現進行橋接。

function useRecoilBridgeAcrossReactRoots_UNSTABLE():
  React.AbstractComponent<{children: React.Node}>;

如果使用 ReactDOM.render() 建立巢狀 React 根，或使用巢狀自訂呈現，React 將不會將內容狀態傳播到子根。如果您想要「橋接」並與巢狀 React 根共用 Recoil 狀態，這個 hook 會很有用。這個 hook 會傳回一個 React 元件，您可以使用它取代巢狀 React 根中的 <RecoilRoot> 以共用相同的 Recoil 儲存狀態。如同任何跨 React 根的狀態共用一般，在所有情況下，變更可能無法完美同步。

範例

function Bridge() {
  const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();

  return (
    <CustomRenderer>
      <RecoilBridge>
        ...
      </RecoilBridge>
    </CustomRenderer>
  );
}

function MyApp() {
  return (
    <RecoilRoot>
      ...
      <Bridge />
    </RecoilRoot>
  );
}