我将JSS注入到手动加载的iframe中，然后每当redux状态中的某些值发生变化时启动重载，如下所示：

export default function ETFStyleUpdater({ sheet, id }: Props) {
  const readerConfig = useAppSelector((state) => state.bookReader[id] || DEFAULT_BOOK_READER_CONFIG_STATE);

  useEffect(() => {
    sheet.update(readerConfig);
  }, [readerConfig]);

  return <></>;
}

react程式码的载入方式如下：

const container = document.body.appendChild(document.createElement("div"));
  createRoot(container!).render(
    <Provider store={store}>
      <ETFStyleUpdater sheet={sheet} id={bookId} />
    </Provider>,
  );

虽然我写的时候感觉很糟糕，但它在Webpack* 上运行得很好。

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

这一切都被动态加载到iframe中，但通过window.parent上的属性访问存储，它与webpack一起工作得很好。
如果不创建一个新的react根目录并对useEffect进行恶意攻击，我怎么能得到同样的效果呢？我试图将对sheet的引用放到window上，并使用redux-toolkitextraReducer（或中间件），但它似乎没有更新，即使那里有一个引用。