在危险的SetInnerHTML中传递反应组件

服务器返回类似以下内容：

内容=<p> Hello world :smile: <strong> NICE </strong> !</p>- 这是因为我们支持降价。

现在我有一个解析器可以解析所有内容:{text}:变成表情符号。我在用emoji-mart对于这个。

这就是内容现在的样子：

<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>

目前，如果没有表情符号解析器，我们要做的是：

return React.createElement('div', { 
   dangerouslySetInnerHTML: {
    __html: content,
  }
});

然而，由于我们现在连接content包含来自的表情符号emoji-mart我如何将其传递给dangerouslySetInnerHTML不破坏降价？

在尝试这种情况后，我发现您实际上可以传递使用功能组件并返回字符串：https://github.com/missive/emoji-mart#using-with-dangerouslysetinnerhtml 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:

（反应组件内的渲染函数）

render() {
    const props = {
      dangerouslySetInnerHTML: {
        __html: testComponent(this.props.content),
      },
    };

    return React.createElement('div', props);

}

这比使用更黑客，但更便宜：

renderToString()
renderToStaticMarkup()