ReactJS 将 HTML 字符串转换为 JSX

问题描述

我在处理 facebook 的 ReactJS 时遇到问题.每当我执行 ajax 并想要显示 html 数据时，ReactJS 都会将其显示为文本.(见下图)

I'm having trouble dealing with facebook's ReactJS. Whenever I do ajax and want to display an html data, ReactJS displays it as text. (See figure below)

通过jquery Ajax的success回调函数显示数据.

The data is displayed through the success callback function of the jquery Ajax.

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

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

Is there any easy way to convert this into html? How should I do it using ReactJS?

推荐答案

默认情况下，React 会转义 HTML 以防止 XSS(跨站脚本).如果你真的想渲染 HTML，你可以使用 dangerouslySetInnerHTML 属性:

By default, React escapes the HTML to prevent XSS (Cross-site scripting). If you really want to render HTML, you can use the dangerouslySetInnerHTML property:

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

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

React forces this intentionally-cumbersome syntax so that you don't accidentally render text as HTML and introduce XSS bugs.

这篇关于ReactJS 将 HTML 字符串转换为 JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！