你如何將 React 組件渲染為字符串

Question

我想弄清楚是否可以將 React 組件“呈現”為 HTML 字符串。 “渲染”這個詞很可能是不正確的，因為它意味着將它放在實際的 dom 本身上，而我是說我想從 react 組件創建一個格式化的 HTML 字符串。 例子：

renderToString((
<CustomComponent>
 {children}
</CustomComponent>
))

renderToString 將大致返回...

"<div><ul><li>child1</li><li>child2</li?</ul></div>"

如果可以將 React “渲染”為原始 html 元素（不在 dom 上），那么這些元素也可以使用。

背景：在我使用的 React 應用程序中，我包裝了另一個非 React JavaScript 庫，該庫操作和處理自己的渲染。 目前，React 被用於構建控制器來操作該庫的對象創建。

這個庫允許回調函數來創建 HTML 元素（作為字符串），然后它用來嵌入到它操作的畫布上。

我想使用適當的 JSX 來構建字符串。

有任何想法嗎？

Answer 1

聽起來您正在尋找ReactDOMServer.renderToStaticMarkup()或ReactDOMServer.renderToString() 。 這兩個函數都可以在服務器和瀏覽器環境中使用。