React.js将HTML字符串转换为JSX

我在处理Facebook的ReactJS时遇到问题。每当我执行ajax并想要显示html数据时，ReactJS会将其显示为文本。（请参见下图）

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

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

是否有任何简单的方法可以将其转换为html？我应该如何使用ReactJS？

#1 楼

默认情况下，React会转义HTML以防止XSS（跨站点脚本）。如果您确实要呈现HTML，则可以使用dangerouslySetInnerHTML属性：

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

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

此语法显示在首页和教程中，但我只是意识到它在其他任何地方都没有记录，因此我提交了＃413进行修复。

–索菲·阿尔珀特（Sophie Alpert）
13年10月9日在16:34

正确！我已经使用危险地解决了这个问题SetInnerHTML，但谢谢:)

– Peter Wateber
13-10-10在2:37

如果要从外部API获取信息，则值得使用dompurify npm包中的sanitize函数对内容进行安全清理。

–巴里·迈克尔·道尔（Barry Michael Doyle）
1月27日8:10

可能您可以尝试这篇文章，您可以在其中将内容放入stackoverflow.com/questions/33381029/…示例：{['abc'，我的粗体，'其他一些文字']}

– Sunil Kumar
11月26日12:31

#2 楼

现在有更安全的方法可以完成此操作。这些方法已更新了文档。

其他方法

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

<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>

最后的手段-使用dangerouslySetInnerHTML插入原始HTML。

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

我已经准备好文档，但是关于一个长HTML字符串（例如，所见即所得编辑器中的HTML字符串）？我看不到如何使用第一种，第二种或第三种方法

–ericn
2015年8月14日，下午3:47

我同意@eric。方法1-3用于将已转义的内容存储在某处，例如数据库？还要注意，方法4（唯一的方法）意味着您不能添加子节点。

– dvdplm
15/09/23在19:20

对。这些带有硬编码“动态”内容的示例没有多大意义。

–regularmike
2015年10月10日，0：47

This is my innerHTML - "Displaying admins \u003cb\u003e1\u0026nbsp;-\u0026nbsp;10\u003c/b\u003e of \u003cb\u003e13\u003c/b\u003e in total" while this is what is being rendered - "Displaying admins 1 - 10 of 13 in total". When I try to use dangerouslySetInnerHTML, evrything breaks.

– vipin8169
Mar 21 '16 at 11:36

#3 楼

我建议使用Miles创建的Interweave。它是一个了不起的库，它利用许多巧妙的技术来解析并安全地将HTML插入DOM。

Interweave是一个React库，可安全地呈现HTML，过滤器
属性，使用匹配器自动换行文本，呈现表情符号字符以及
更多内容。

Interweave是一个强大的React库，可以：

安全地呈现HTML，而无需使用危险的SetInnerHTML。
安全地剥离HTML标签。
自动XSS和注入保护。
使用过滤器清除HTML属性。
使用匹配器插入组件。
自动链接URL，IP，电子邮件和主题标签。
呈现表情符号和表情符号字符。
更多！

用法示例：

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave

您能提供一个用法示例吗？

– El Anonimo
18年8月6日在10:18

@ElAnonimo我添加了一个用法示例。希望这会使事情变得更加清晰。

–Arman Nisch
18-09-16在7:26

感谢一百万，交织正是我所需要的。干杯。

–尼古拉斯·汉密尔顿
19年2月26日在22:48

此文档没有帮助。我也尝试了几行html，并且页面上充满了错误消息。有人提供示例或任何带有文档的资源吗？

–塔伦·科拉（Tarun Kolla）
19年7月31日在14:49

您知道Interweave不能涵盖哪些威胁吗？

–克里斯托弗（Christophe）
10月9日7:48

#4 楼

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

该库的最新版本提供了一种非常干净的html注入方式。而且replace方法是用自己的组件替换（例如）img标签的好方法。

– Micros
12月16日12:54

#5 楼

我发现这个js小提琴。像这样

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

jsfiddle链接

不幸的是，文档无法在服务器渲染上运行。

– Laurent Van Winckel
16-09-17在13:15

如果确实要从“ jsdom”导入JSDOM，则可能会成功。 global.window = new JSDOM（''，{url：'http：// localhost'}）; global.document = global.window.document;伊德克·古德勒克

– Coty Embry
19年4月12日在14:48

JSX在哪里？

– Martin Melichar
10月25日6:56

#6 楼

对于仍在尝试的用户，npm install react-html-parser

安装后，每周下载123628。

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

#7 楼

您还可以使用html-react-parser中的Parser（）。
我用过相同的。链接已共享。

#8 楼

我开始使用名为react-html-parser
的npm包

#9 楼

如果您想在React中呈现原始html，可以使用以下内容

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

示例-渲染

测试是美好的一天

#10 楼

可以通过使用像这样在{[]}块中放置的内容来解决此问题。为了更清楚起见，下面可以引用示例。

{[
   'abc',
   <b>my bold</b>, 
   'some other text'
]}

这将保留标签下文本的格式，而其他字符将打印为纯文本。

编程黑洞网