javascript - react 18 : how to force synchronous rendering?

Question

升级到 React 18 后，我在渲染 Leaflet 弹出窗口时遇到问题。

似乎新的渲染函数变成了异步的，这破坏了 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;
});