javascript - 将纯文本 react 为 html 代码

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

实例

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>