Question

如果你想在React视图中将°F这样的字符串显示为°F，我已经找到了记录的方法来执行以下操作：

import React from 'react';

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

使用类似的东西：

{renderSafeHTML('&deg;F')}

生态系统中是否有任何类型的助手来简化转义内容？ Ember有{{content}}用于转义，{{{content}}}用于显示没有转义的内容，.safeString用于标记字符串是安全的。

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

Answer 1

我正在使用react 16x

你不需要unicode的助手 - 你可以直接在JSX中嵌入unicode字符

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

或

<h1>40°F</h1>

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

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

Answer 2

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

这取自他们的文档：

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

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

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

2 个答案: