ReactJS 将 HTML 字符串转换为 JSX

javascript jquery ajax reactjs

2022-08-30 00:16:08

我在处理Facebook的ReactJS时遇到了麻烦。每当我做ajax并想要显示html数据时，ReactJS都会将其显示为文本。（见下图）

ReactJS render string

数据通过 jquery Ajax 的成功回调函数显示。

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

enter image description here

有没有简单的方法可以将其转换为html？我应该如何使用 ReactJS 来做到这一点？

答案 1

默认情况下，React 会转义 HTML 以防止 XSS（跨站点脚本）。如果你真的想渲染 HTML，你可以使用 dangerouslySetInnerHTML 属性：

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

React 强制使用这种故意繁琐的语法，这样您就不会意外地将文本呈现为 HTML 并引入 XSS 错误。

答案 2

现在有更安全的方法来实现这一目标。这些文档已使用这些方法进行了更新。

其他方法

最简单的 - 使用 Unicode，将文件另存为 UTF-8 并将设置为 UTF-8。charset

<div>{'First · Second'}</div>
更安全 - 对 Javascript 字符串中的实体使用 Unicode 编号。

<div>{'First \u00b7 Second'}</div>

或

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
或者包含字符串和 JSX 元素的混合数组。

<div>{['First ', <span>·</span>, ' Second']}</div>
最后的手段 - 使用插入原始 HTML。dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />