将纯文本反应为 html 代码答案

【问题标题】：React plain text to html code将纯文本反应为 html 代码
【发布时间】：2018-03-27 04:27:07
【问题描述】：

我从 API 获得了一个对象列表。每个对象的值之一是纯字符串：

snippet: "Chainsmokers were re-formed as an EDM DJ duo in 2012 under the management of <span class="searchmatch">Adam</span> Alpert in New York City. Pall, who had grown up DJing, was introduced to"

我想将此纯字符串转换为 html。我该怎么做？

编辑：我尝试做的是像这样映射 React 中的列表：

const list = props.responseData.map(item => (
<li key={item.pageid}>
  {item.title}
  <br />
  {item.snippet}
</li>
));

sn-p 显示为纯字符串，而不是 HTML 代码。编写 item.sn-p.innerHTML 不起作用。它显示一个空列表。

【问题讨论】：

你在前端使用什么技术？
@Hassan Imam 的问题很好。您所拥有的已经是有效的 HTML。
反应。它只是将带有标签的响应显示为纯文本。我希望能够将等显示为 html 代码
Render HTML string as real HTML in a React component的可能重复

标签： javascript html reactjs frontend

【解决方案1】：

我想通了。我需要把它放在一个具有特殊属性的 div 中：

<div dangerouslySetInnerHTML={{ __html: item.snippet }} />

现场示例

class App extends React.Component {

constructor() {
    super();
    this.state = {
      snippet: `Chainsmokers were re-formed as an EDM DJ duo in 2012 under the management of <span class="searchmatch">Adam</span> Alpert in New York City. Pall, who had grown up DJing, was introduced to`
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.snippet }} />
    );
  }
}

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

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

【讨论】：

【解决方案2】：

如果你想在一个指定id的div中显示obj.snippet，这很简单

HTML

<div id="myDiv"></div>

document.getElementById('myDiv').innerHTML = obj.snippet;

【讨论】：