ReactJS - renderToStaticMarkup() 方法
React 既可用于客户端渲染，也可用于服务器端渲染。因此，我们将看到 renderToStaticMarkup 函数，它是 React 服务器端渲染功能的一部分。
什么是 renderToStaticMarkup?
React 的 renderToStaticMarkup 函数允许我们将非交互式 React 组件转换为 HTML 字符串。换句话说，我们可以说它将我们的 React 组件转换为纯 HTML。这在使用 React 生成静态 HTML 页面或电子邮件时特别有用。
语法
const html = renderToStaticMarkup(reactNode)
参数
reactNode −它是一个要渲染为 HTML 的 React 节点。例如，考虑 JSX 节点 <MyComponent />。
返回值
它确实返回一个 HTML 字符串。
示例
示例 − 基本组件渲染
此应用定义了一个名为 App 的简单 React 组件，它渲染一个带有问候消息的基本 div 元素。然后使用 renderToStaticMarkup() 函数将 React 组件转换为静态 HTML 标记。代码如下 −
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const App = () => {
return <div>Hello, this is a basic React component!</div>;
};
export default App;
const staticMarkup = ReactDOMServer.renderToStaticMarkup(<App />);
console.log(staticMarkup);
输出
使用 Props 的示例 −
在此应用中，我们将有两个组件 - Greeting 和 App。Greeting 组件采用 name prop 并将其合并到问候消息中。App 组件使用特定名称(本例中为 Joseph)呈现 Greeting 组件。因此代码如下所示 −
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const Greeting = (props) => {
return <div>Hello, {props.name}!</div>;
};
const App = () => {
return <Greeting name="Joseph" />;
};
export default App;
const staticMarkup = ReactDOMServer.renderToStaticMarkup(<App />);
console.log(staticMarkup);
输出
示例 − 嵌套组件
此应用程序将具有嵌套组件。有两个组件 − InnerComponent 和 OuterComponent。OuterComponent 呈现 h2 标题并在其中包含 InnerComponent。此应用程序的代码如下 −
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const InnerComponent = () => {
return <p>This is an inner component.</p>;
};
const OuterComponent = () => {
return (
<div>
<h2>Hello from the outer component!</h2>
<InnerComponent />
</div>
);
};
const App = () => {
return <OuterComponent />;
};
export default App;
const staticMarkup = ReactDOMServer.renderToStaticMarkup(<App />);
console.log(staticMarkup);
输出
示例
使用 renderToStaticMarkup 是一种非常简单的方法。
导入函数
要使用 renderToStaticMarkup，我们需要通过从"react-dom/server"包导入它将其包含在我们的服务器端代码中。
import { renderToStaticMarkup } from 'react-dom/server';
渲染 React 组件
我们可以在导入 React 组件后使用该函数来渲染它。例如，假设我们有一个名为 <MyComponent /> 的组件我们想要渲染为 HTML。
const html = renderToStaticMarkup(<MyComponent />);
发送 HTML 响应
使用 renderToStaticMarkup 后，我们将得到一个 HTML 字符串。然后我们的服务器可以将此 HTML 作为响应发送。以下是服务器路由处理程序中如何执行此操作的示例 −
app.use('/', (request, response) => {
const html = renderToStaticMarkup(<MyComponent />);
response.send(html);
});
为什么使用 renderToStaticMarkup()?
当我们需要生成非交互式 HTML 内容时，renderToStaticMarkup 便应运而生。它在 − 等情况下很有用。
当我们想要将网页预渲染为不依赖客户端 JavaScript 工作的静态 HTML 时。这有助于 SEO 和页面加载时间。
为非交互式电子邮件创建 HTML 模板。React 的组件结构可以使电子邮件模板构建更容易。
摘要
当我们需要生成非交互式 HTML 内容时，renderToStaticMarkup 是 React 中用于服务器端渲染的有用方法。对于静态网站创建和电子邮件模板创建等任务，它是一个有用的工具。
reactjs_reference_api.html
