React 18:如何强制同步渲染?

Question

升级到React 18后，我遇到了传单弹出渲染的问题。

看起来新的渲染函数已经变成异步的，这破坏了传单弹出显示(因为传单需要计算弹出窗口的大小来定位，但现在它得到一个空内容，因为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

没有尝试过你的场景，但也许行为可以工作https://reactjs.org/docs/testing-recipes.html#act

记得导入actfromreact-dom/test-utils

marker.bindPopup(() => {
var div = document.createElement('div');
const root = createRoot(div);
act(() => {
root.render(<MyPopup />);
});
return div;
});