Question

服务器返回以下内容：

content =  Hello world :smile: NICE !-这是因为我们支持降价促销。

现在我有一个解析器，可将:{text}:的所有内容解析为表情符号。我正在为此使用emoji-mart。

这就是现在的内容：

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

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

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

但是，由于我们现在将content串联起来包含emoji-mart中的表情符号，我如何将其传递给dangerouslySetInnerHTML而又不会破坏降价幅度？

Answer 1

在您的情况下，您应该使用React.renderToStaticMarkup(JSXInstance)

<p> Hello world ${React.renderToStaticMarkup(<Emoji emoji=":smile:" />)} <strong> NICE </strong> !</p>

Answer 2

在解决这种情况时，我发现您实际上可以传递使用功能的组件并返回字符串：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);

}

这很骇人，但比使用它便宜：

renderToString()
renderToStaticMarkup()

通过react组件危险地传递SetInnerHTML

2 个答案: