renderToStaticMarkup
会将非交互的 React 组件树渲染成 HTML 字符串。
const html = renderToStaticMarkup(reactNode, options?)
参考
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 byuseId
. Useful to avoid conflicts when using multiple roots on the same page.
- optional
返回值
一个 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 。