Javascript Reactjs将html字符串转换为jsx

我在处理facebook的问题时遇到了麻烦。每当我使用ajax并希望显示html数据时，ReactJS都会将其显示为文本。（见下图）

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

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

---

有没有简单的方法将其转换为html？我应该如何使用ReactJS执行此操作？

默认情况下，React会转义HTML以防止。如果确实要呈现HTML，可以使用以下属性：

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

---

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

现在有更安全的方法来实现这一点。用户可以使用这些方法

其他方法

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

字符集

设置为UTF-8

{'First·Second'}

更安全-对Javascript字符串中的实体使用Unicode编号

{'First\u00b7 Second'}

或

{'First'+String.fromCharCode（183）+'Second'}

或者使用字符串和JSX元素的混合数组

{['First'，·；，'Second']}

万不得已-使用

危险的setinerHTML插入原始HTML

---

我找到了这把小提琴。这个是这样工作的

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>

函数unescapethtml（html）{
var escapeEl=document.createElement（'textarea'）；
escapeEl.innerHTML=html；
返回escapeEl.textContent；
}

链接

我建议使用创建人。这是一个惊人的库，它使用了一些巧妙的技术来解析HTML并将其安全地插入DOM

Interweave是一个react库，用于安全地呈现HTML、过滤器 属性、使用匹配器自动换行文本、渲染表情符号和 更多

• Interweave是一个强大的反应库，它可以：
  • 安全地呈现HTML而不使用危险的HTML
  • 安全地剥离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

从“React”导入React；
从“交织”导入{Markup}；
const articleContent=“Lorem ipsum dolor laboriosam
 Facere debitis妨碍了对过失的合理解释？不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产、不动产？即使是最基本的权利，也不能排除罪过？布朗迪提斯·伊尼姆（Blanditiis enim）
与非rem、atque、earum quis的原则相同，
与贝塔（beatae）相比，它是一种特殊的责任
//这将获取articleContent字符串并将其转换为HTML标记。请参阅：https://milesj.gitbook.io/interweave
//要使用npm安装软件包，请执行以下命令
npm安装交织

您还可以使用html react Parser中的Parser（）。

---

我使用了相同的.shared。

我开始使用名为react html解析器的npm包

npm I html react parser；
npm i html-react-parser;

import Parser from 'html-react-parser';

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

从“html反应解析器”导入解析器；
{解析器（this.state.archyves）}

对于仍在试验的用户，npm安装react html解析器

npm i html-react-parser;

import Parser from 'html-react-parser';

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

当我安装它时，它每周下载123628次

import ReactHtmlParser from 'react-html-parser'

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

从'react html parser'导入ReactHtmlParser'
{ReactHtmlParser（htmlString）}

如果要在React中呈现原始html，可以使用以下命令

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

示例-渲染

---

测试是个好日子

这可以通过像这样使用放在这个块

{[]}

中的内容来解决。为了更清晰，可以参考下面的示例

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

{[
“abc”，
我大胆的，
“其他文本”
]} 

---

这将保留标记下文本的格式，而其他文本将以纯文本打印。

如果您事先知道要呈现的字符串中有哪些标记；例如，如果在创建字符串时只允许某些标记，则可以这样做；解决此问题的一种可能方法是使用Trans实用程序：

import { Trans } from 'react-i18next'
import React, { FunctionComponent } from "react";

export type MyComponentProps = {
    htmlString: string
}

export const MyComponent: FunctionComponent<MyComponentProps> = ({
  htmlString
}) => {
  return (
    <div>
      <Trans
        components={{
          b: <b />,
          p: <p />
        }}
      >
        {htmlString}
      </Trans>
    </div>
  )
}

从'react-i18next'导入{Trans}
从“React”导入React，{FunctionComponent}；
导出类型MyComponentProps={
htmlString:字符串
}
导出常量MyComponent:FunctionComponent=({
htmlString
}) => {
返回(
{htmlString}
)
}

然后你可以像往常一样使用它

<MyComponent
    htmlString={'<p>Hello <b>World</b></p>'}
/>

此语法显示在主页和教程中，但我刚刚意识到它在其他任何地方都没有文档记录，所以我只是提交了修复。正确！我已经用危险的LysetinerHTML解决了这个问题，但是谢谢：）使用

dompurify

中的

sanitize

函数对内容进行清理是值得的>如果您是从外部API获取信息，请使用npm软件包。也许，您可以尝试这篇文章，其中您可以将您的内容放在示例中：{['abc'，我的粗体，'someothertext']}请注意，尽管它是“危险的”，如果您只是使用它从您的服务器呈现html，它并不比在网页中显示该内容更危险。如果该内容包含用户提供的未经清理的输入，并且直接来自您应该在后端清理的服务器，则会出现危险。我已经准备好文档umentation但是关于一个长的HTML字符串，比如一个来自WYSIWYG编辑器的字符串？我不知道如何使用第1、第2或第3种方法。我同意@eric。对于存储在某个地方的已转义内容（例如数据库），方法1-3有什么用？另外请注意，方法4–唯一的方法–意味着您不能添加子节点。是的