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 就会发挥作用。它在以下情况下很有帮助：

• 当我们想要预渲染网页为静态 HTML，而无需依赖客户端 JavaScript 才能工作时。这可以帮助提高 SEO 和页面加载速度。

• 为非交互式电子邮件创建 HTML 模板。React 的组件结构可以使电子邮件模板构建更容易。

总结

当我们需要生成非交互式 HTML 内容时，renderToStaticMarkup 是 React 中服务器端渲染的有用方法。对于静态网站创建和电子邮件模板创建等任务，它是一个有用的工具，可以添加到我们的工具箱中。