React 18：如何強制同步渲染？

Question

升級到 React 18 后，我遇到了 Leaflet 彈出渲染問題。

似乎新的渲染 function 已經變成異步的，這打破了 Leaflet 彈出顯示（因為 Leaflet 需要計算彈出內容的大小，因為 React 已經定位，但現在它需要計算彈出內容的大小）

之前（按預期工作）：

marker.bindPopup(() => {
  var div = document.createElement('div');
  ReactDOM.render(<MyPopup />);
  console.log(div.innerHTML); // <div>[...]</div>
  return div;
});

使用 React 18（定位損壞）：

marker.bindPopup(() => {
  var div = document.createElement('div');
  createRoot(div).render(<MyPopup />);
  console.log(div.innerHTML); // empty string!
  return div;
});

有沒有辦法強制 React 18 在返回div之前呈現彈出窗口？

提前感謝您的幫助和想法

Answer 1

我剛剛找到了另一種似乎有效且更適合生產環境的解決方案： flushSync 。 在 React 文檔中，並沒有為此目的提及，只是選擇退出自動批處理。

我仍然不確定這是否是正確的方法，或者它是否會在未來的更新中中斷。

marker.bindPopup(() => {
  var div = document.createElement('div');
  const root = createRoot(div);

  flushSync(() => {
    root.render(<MyPopup />);
  });

  console.log(div.innerHTML); // <div>[...]</div>
  return div;
});

Answer 2

沒有嘗試過你的場景，但也許 act 可以工作https://reactjs.org/docs/testing-recipes.html#act

記得從react-dom/test-utils導入act

marker.bindPopup(() => {
   var div = document.createElement('div');
   const root = createRoot(div);

   act(() => {
     root.render(<MyPopup />);
   });

   return div;
});