Question

我有一个带帖子的JSON表。内容以HTML格式提供，当我尝试在React中呈现它时：

  return (
    <article>
      <h2><a href={post.link}>{post.title.rendered}</a></h2>
      <div className="post__content">{post.content.rendered}</div>
    </article>
  )

我正在打印（转义）完整的HTML标记。我该怎么办？

Answer 1

尝试使用dangerouslySetInnerHTML

<article>
  <h2><a href={post.link}>{post.title.rendered}</a></h2>
  <div className="post__content" dangerouslySetInnerHTML={{__html: post.content.rendered}}></div>
</article>

Answer 2

如果您正在寻找代码片段之类的内容，则可以使用字符串文字，而不是dangerouslySetInnerHTML：

var Snippet = React.createClass({
  render: function() {
    return (
      <div>
        {`
        <pre><code>
                  <h4>I am code!</h4>
                </code></pre>
        `}
      </div>
    );
  }
});

ReactDOM.render(
  <Snippet/>,
  document.getElementById('container')
);

使用React打印数据HTML

2 个答案: