ReactJS - renderToStaticMarkup（） 方法

---

---

React 既可用于客户端渲染，也可用于服务器端渲染。因此，我们将看到 renderToStaticMarkup 函数，它是 React 服务器端渲染功能的一部分。

什么是 renderToStaticMarkup？

React 的 renderToStaticMarkup 函数允许我们转换非交互式 React 组件添加到 HTML 字符串中。换句话说，我们可以说它转换了我们的 React 组件转换为纯 HTML。这在使用 React 生成静态时特别有用 HTML 页面或电子邮件。

语法

const html = renderToStaticMarkup(reactNode)

参数

• reactNode - 它是一个React节点，将被渲染为HTML。例如，考虑 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);

输出

示例 - 使用道具

在这个应用程序中，我们将有两个组件 - Greeting 和 App。Greeting 组件采用 name 属性并将其合并到问候消息中。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 中服务器端渲染的有用方法。这是一个有用的工具，可以带到我们的工具箱中，用于静态网站创建和电子邮件模板创建等任务。