ReactJS 将 HTML 字符串转换为 JSX

Question

我在处理 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？

Answer 1

默认情况下，React 会转义 HTML 以阻止 XSS (Cross-site scripting)。如果你真的想渲染 HTML，你可以使用dangerouslySetInnerHTML 属性：

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

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

Answer 2

现在有更安全的方法来实现这一点。 docs have been updated 有这些方法。

其他方法

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

   <div>{'First · Second'}</div>

2. 更安全 - 为 Javascript 字符串中的实体使用 Unicode 编号。

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

   或

   <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

3. 或者是一个包含字符串和 JSX 元素的混合数组。

   <div>{['First ', <span>·</span>, ' Second']}</div>

4. 不得已 - 使用 dangerouslySetInnerHTML 插入原始 HTML。

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

Answer 3

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

Interweave 是一个用于安全渲染 HTML、过滤器的反应库 属性，使用匹配器自动换行文本，渲染表情符号字符，以及 更多。

• Interweave 是一个强大的 React 库，它可以：
  • 无需使用 dangerouslySetInnerHTML 即可安全呈现 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

Answer 4

npm i html-react-parser;

import Parser from 'html-react-parser';

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

Answer 5

对于那些仍在尝试的人，npm install react-html-parser

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

import ReactHtmlParser from 'react-html-parser'

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

Answer 6

如果你想在 React 中渲染原始 html，你可以使用以下代码

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

示例 - 渲染

测试是美好的一天

Answer 7

这可以通过使用这个块{[]} 中的内容来解决，就像这样。为了更清楚起见，可以参考下面的示例。

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

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

Answer 8

我发现了这个 js fiddle。像这样工作

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

Answer 9

您还可以使用 html-react-parser 中的 Parser()。 我也用过。 Link 共享。

Answer 10

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

Answer 11

现有答案中缺少的一个选项是使用<React.Fragment>（在 React v16 及更高版本中可用）。我发现这是最好的，因为这允许您将任何 html 元素存储为 JSX 变量，并在以后引用它。也因为使用dangerouslySetInnerHTML 不安全。

举例

const App = () => {
    const Windows = <React.Fragment>Microsoft <abbr title="Operating System">OS</abbr></React.Fragment>

    return (
      <ul>
        <li>{Windows}</li>
      </ul>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

其他替代方案和注意事项：

1. 如果您从外部来源获取 HTML，则不能使用此方法，因为获取的 HTML 将采用字符串格式。在这种情况下，您需要使用像 html-react-parser 这样的 HTML 解析器来解析 HTML
2. 如果您没有任何键或属性，you can also use <></> 是<React.Fragment></React.Fragment> 的简写
3. 请记住dangerouslySetInnerHTML is dangerous to use 因为可以通过脚本标签注入恶意客户端代码：
4. @Brett 还建议other alternatives：
5. 注意： 在 JSX Variale 中使用引号
   • 你不应该用引号包围一个 JSX 变量（像一个常规变量） - 你应该用 <React.Fragment> </ React.Fragment> 包围它
   • 您不应该在 JSX 变量的 html 标记中转义引号 - 例如，上面 <abbr /> 标记中的 title 包含未转义的引号。

Answer 12

如果您事先知道要渲染的字符串中的标签；例如，如果在创建字符串时只允许某些标签；解决此问题的一种可能方法是使用 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>
  )
}

那么你可以像往常一样使用它

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

Answer 13

这非常简单。
而且它完美运行。

import {settings} from '../settings';


const NavBar = (props) => {
    
    let isLoggedIn=props.isLoggedIn;

    let login_partial = "";
    if(isLoggedIn)
    {login_partial= <li>Log Out</li>;}
    else{
    login_partial=
  <div>
      <li>Login</li>
    <li>Sign Up</li>
</div>;
   }

    return(
        <div>
               <ul>
                    <li>Home</li>
                    <li>Products</li>
                    {login_partial}
                </ul>
        </div>
    )
}
export default NavBar;