如何将反应组件转换为 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