如何將反應組件轉換為 html 字符串？

Question

我在這里發現了類似於我的問題。

但我有一些不同的場景。 我有 html 字符串，而不僅僅是字符串。 所以，我想做：

讓我們假設 MyComponent 現在只是返回 h3 元素：

const MyComponent = ({children}) => (<h3>{children}</h3>)

var parts = "<h1>I</h1><p>am a cow;</p>cows say moo. MOOOOO."
    .split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <MyComponent key={i}>{parts[i]}</MyComponent>;
}
// But I need html to be rendered
return <div dangerouslySetInnerHTML={{ __html: parts }} />

這將在瀏覽器中呈現如下：

I
am a cow;
cows say ,[object Object],. ,[object Object],.

我在這里能想到的解決這個問題的方法是首先用 html 字符串轉換組件。

parts[i] = convertToStringOfHtml(<MyComponent key={i}>{parts[i]}</MyComponent>);

但我不知道如何將組件轉換為 html 字符串。

Answer 1

你可以用 react-dom 做

import { renderToString } from 'react-dom/server'
//
//
parts[i] = renderToString(<MyComponent key={i}>{parts[i]}</MyComponent>)

在此處查看更多信息https://reactjs.org/docs/react-dom-server.html