服务器返回如下内容：
content = <p> Hello world :smile: <strong> NICE </strong> !</p>- 这是因为我们支持markdown。
现在我有一个解析器，可以将所有内容解析:{text}:为表情符号。我正在使用emoji-mart这个。
所以这就是现在的内容：
<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>
目前没有表情符号解析器，我们要做的是：
return React.createElement('div', {
dangerouslySetInnerHTML: {
__html: content,
}
});
但是，既然我们现在content将包含表情符号的连接起来，emoji-mart我将如何在dangerouslySetInnerHTML不破坏降价的情况下将其传递给？
在处理这种情况时，我发现您实际上可以传递 use 功能组件并返回字符串：https : //github.com/missive/emoji-mart#using-with-dangerouslysetinnerhtml（专门针对我的问题emoji-mart）
所以我对我的其他组件所做的都是一样的，我没有调用 React 组件，而是创建了一个函数：
function testComponent(props) {
const { style, className, children, html } = props;
if (html) {
return `<span style='${style}' class='${className}'>${children || ''}</span>`;
}
return (
<span style="${style}" class="${className}">
${children || ''}
</span>
);
}
并将其称为：
function testComponent(props) {
const { content } = props; // content is a markdown and can be a stringified image tag
return testComponent({ children: content, html: true });
}
而对于dangerouslySetInnerHTML：
（在你的 React 组件中渲染函数）
render() {
const props = {
dangerouslySetInnerHTML: {
__html: testComponent(this.props.content),
},
};
return React.createElement('div', props);
}
这是 hackier，但比使用便宜：
renderToString()
renderToStaticMarkup()
React.renderToStaticMarkup(JSXInstance)在您的情况下，您应该使用：
<p> Hello world ${React.renderToStaticMarkup(<Emoji emoji=":smile:" />)} <strong> NICE </strong> !</p>