renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• 参考
  • renderToStaticMarkup(reactNode, options?)
• 用法
  • 将一个非交互式的 React 树渲染成 HTML 字符串

参考

renderToStaticMarkup(reactNode, options?)

在服务器上，调用 renderToStaticMarkup 将你的应用程序渲染成 HTML。

import { renderToStaticMarkup } from 'react-dom/server';

const html = renderToStaticMarkup(<Page />);

它将会把 React 组件转换为非交互式 HTML 。

请看下方更多示例。

参数

• reactNode: A React node you want to render to HTML. For example, a JSX node like <Page />.
• optional options: An object for server render.
  • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

返回值

一个 HTML 字符串。

注意事项

• renderToStaticMarkup 的输出无法进行二次渲染。

• renderToStaticMarkup 对 Suspense 的支持有限。如果一个组件触发了 Suspense，renderToStaticMarkup 立即将它的后备方案作为 HTML 输出。

• renderToStaticMarkup 在浏览器中可以使用，但不建议在客户端代码中使用它。如果你需要在浏览器中将组件渲染成 HTML，请把它渲染到 DOM 节点中以获取 HTML。

用法

将一个非交互式的 React 树渲染成 HTML 字符串

“

调用 renderToStaticMarkup 将你的应用程序渲染为 HTML 字符串，然后将其与服务器响应一起发送：

import { renderToStaticMarkup } from 'react-dom/server';

// 路由处理程序语法取决于你的后端框架
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

这将会把 React 组件转换为非交互式 HTML 。