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

我有一个React类，渲染函数运行良好。

标签和内部

'；
返回retStr；
}
render（）{
返回(

{this.getListItem（）}

);
}
}

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

我总是使用它来呈现组件中的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);
}

getListItem（）{
const retStr=''；
返回反应器htmlparser（retStr）；
}

编辑：

---

请注意，react html解析器用于解析已存储在变量中的html字符串。对于上面的例子，html字符串是在前一行中构造的，我们可以像任何react组件一样以jsx格式返回标记

在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”导入React；
类ExchangeListItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
getListItem=（exchangeUrl，exchangeName）=>(
);
render（）{
返回(

{this.getListItem（this.props.exchange.url，this.props.exchange.name）}

);
}
}

是的，因为这是一个字符串而不是JSX而你的问题不是完全重复的，你会在这个问题上找到答案（基本上，你是在寻找

危险的setinenerHTML

）谢谢你John，但我认为从呈现react组件而不是HTML的角度来看这是最好的答案。问题不在于我是否可以影响所需的内容，而在于React如何处理它（它会转义字符串中的HTML，而不是呈现它），因此为它提供React对象很好地解决了这一问题。非常感谢，这太完美了！对于子孙后代，我想补充一点，添加react html解析器之后还需要json加载程序，因为我也在使用webpack版本，该版本运行良好，并且我能够删除下面列出的模块（react html解析器和json加载程序）

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>
    );
  }
}