React生态系统中的安全字符串输出

Question

如果你想在React视图中显示像°F这样的字符串为°F，我发现了记录的方法，如下所示：

import React from 'react';

export default function renderSafeHTML(rawHTML, element = 'div') {
  return React.createElement(element, {
    dangerouslySetInnerHTML: {
      __html: rawHTML
    }
  });
}

并使用如下：

{renderSafeHTML('°F')}

生态系统中是否有任何帮助来简化转义内容？ Ember有{{content}}逃脱和{{{content}}}显示内容没有逃脱和.safeString标记字符串是安全的。

在React中有类似的东西吗？我很想知道尝试将此功能添加到JSX中，如{}和{{}}，类似于Ember。为什么React中不存在这个？

Answer 1

我相信React希望你知道它的危险性。他们希望你努力输入所有这些。他们不想让事情变得更容易。

这取自他们的文档：

通常，从代码设置HTML是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须键入dangerouslySetInnerHTML并使用__html键传递对象，以提醒自己这很危险。

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 2

我正在使用反应16x

您不需要unicode帮助程序 - 您可以直接在JSX中嵌入unicode字符

<h1>40{'\u00B0'}F</h1>

要么

<h1>40&deg;F</h1>

这将告诉您需要知道的一切：

https://shripadk.github.io/react/docs/jsx-gotchas.html#html-entities