使用reactDOMServer.renderToString()时如何修复“警告：useLayoutEffect在服务器上不执行任何操作”？

Question

使用React 17和MaterialUIv5，代码如下：

const htmlString = reactDOMServer.renderToString(MyReactComponent)

我在控制台中收到以下错误：

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See fb.me/react-uselayouteffect-ssr for common fixes.

我需要将 React 组件转换为字符串以作为工具提示传递到函数中，有没有比使用

reactDOMServer.renderToString

或

reactDOMServer.renderToStaticMarkup

更好的方法？

Answer 1

我不知道您正在使用哪个 MaterialUIv5 组件，但这可能是因为您的

MyReactComponent

在其实现中包含

useLayoutEffect

。

事实上，

reactDOMServer.renderToString

“生成 React 组件的初始 非交互式 HTML 输出”（参见 reactDOMServer.renderToString 文档）。因为

useLayoutEffect

是“在浏览器重新绘制屏幕之前触发的

useEffect

版本”（参见 useLayoutEffect 文档），它会触发

renderToString

不支持的重新渲染。