Question

我从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>
));

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

Answer 1

我明白了。我需要将它放在具有特殊属性的div中：

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

实时示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您想在具有指定obj.snippet的div中显示id，这就像

一样简单

<强> HTML

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

<强> JS

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

将纯文本反应为html代码

2 个答案: