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 中伺服器端渲染的有用方法。對於靜態網站建立和電子郵件模板建立等任務，它是一個有用的工具，可以新增到我們的工具箱中。