在浏览器中呈现之前，React 似乎正在转义 HTML，导致它在页面中显示为代码

Posted 2023-02-22

【中文标题】在浏览器中呈现之前，React 似乎正在转义 HTML，导致它在页面中显示为代码

【英文标题】：React seems to be escaping HTML before rendering in the browser causing it to appear as code in the page

【发布时间】：2018-11-05 16:41:40

【问题描述】：

我有一个 React 类，渲染函数工作正常。 <li> 标签和内部 <a> 标签呈现。 但是，getListItem 返回的 html 字符串不会呈现。相反，它在页面上显示为代码，就好像它已被转义一样。 如何在 React 中防止这种行为，以便在创建组件时构建动态 HTML，如下面的（尝试的）示例中所示？

class ExchangeListItem extends Component 
  constructor(props) 
    super(props);
  this.state = 
    ;
  

  getListItem() 
    const retStr = '<a className="nav-link active" href="'+this.props.exchange.url+'">'+this.props.exchange.name + '</a>';
    return retStr;
  

  render() 
    return (
      <li>
        <a href="https://wwww.google.com">Link</a>
        this.getListItem()
      </li>
    );
  

这里的问题是 React 如何渲染某些东西。如果它是一个字符串，它将转义特殊字符并导致（在这种情况下）HTML 成为显示的文本。另一篇文章只是询问如何更改innerHTML。在我的例子中，我不是试图改变一个元素，而是试图让 React 首先呈现我想要的东西。

【问题讨论】：

是的，因为那是一个字符串而不是 JSX

虽然您的问题不是完全重复的，但您会在这个问题***.com/questions/37337289/… 找到答案（基本上，您正在寻找dangerouslysetInnerHTML）

谢谢约翰，但我认为从渲染一个反应组件而不是 HTML 的角度来解决这个问题是最好的答案。问题不在于我是否可以影响所需的内容，而只是 React 对它的作用（它转义了在字符串中找到的 HTML，而不是渲染它），因此为它提供一个 React 对象可以很好地解决这个问题。

【参考方案1】：

在没有解析器的情况下，在 ES6 中执行此操作的另一种更简洁的方法是；

import React from 'react';

class ExchangeListItem extends React.Component 
  constructor(props) 
    super(props);
    this.state = ;
  

  getListItem = (exchangeUrl, exchangeName) => (
    <a className="nav-link active" href=exchangeUrl>
      exchangeName
    </a>
  );

  render() 
    return (
      <li>
        <a href="https://wwww.google.com">Link</a>
        this.getListItem(this.props.exchange.url, this.props.exchange.name)
      </li>
    );
  

【讨论】：

这很好，我能够删除下面列出的模块（react-html-parser 和 json-loader）

【参考方案2】：

我总是使用react-html-parser 在组件中呈现 html 内容。

导入解析器

import ReactHtmlParser from 'react-html-parser';

在 getListItem 方法中使用它，如下所示

getListItem() 
  const retStr = '<a className="nav-link active" href="'+this.props.exchange.url+'">'+this.props.exchange.name + '</a>';
  return ReactHtmlParser(retStr);

编辑：

请注意，react-html-parser 是解析已经存储在变量中的 html 字符串。对于上述情况，在上一行中构造了 html 字符串，我们可以像任何 react 组件一样以 jsx 格式返回标签​​。

【讨论】：

非常感谢，这是完美的！

为了后代，我想补充一点，添加 react-html-parser 然后还需要 json-loader 因为我也在使用 webpack 版本