javascript - 如何将react组件转换为html字符串？

Question

我发现与我的问题类似here .

但我有一些不同的情况。我有 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