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