我发现与我的问题类似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 字符串。
最佳答案
你可以用react-dom来做
import { renderToString } from 'react-dom/server'
//
//
parts[i] = renderToString(<MyComponent key={i}>{parts[i]}</MyComponent>)
关于javascript - 如何将react组件转换为html字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51915170/