将字符串 json 内容映射到 HTML [重复]

Question

以下代码是将网页的json响应作为实际的html。 json 响应是一个字符串。

{this.props.posts && this.props.posts.length > 0 && this.props.posts.map((p) => (
  <div className='blog-post' key={p.id}>
    <div className='blog-post-top-image'>
      <img src={p.image.url} />
    </div>
    <div className='blog-post-content'>
      <h1>{p.title}</h1>
      <p className='blog-post-posted-on'>{p.publishedAt}</p>
      <div className='blog-post-text'>
        <p className='blog-post-text-p'>{p.body}</p>
      </div>
   </div>
  </div>
))}

{p.body} 由 "<p>some text here</p>\n<p>another text..." 组成的字符串。

如何在页面上将其显示为正确的 html？

Answer 1

您可以使用dangerouslySetInnerHTML，如下：

<p dangerouslySetInnerHTML={{__html: p.body}}></p>