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>

将String json内容映射到HTML

1 个答案: