WP API 和 React 渲染 HTML，而不是文本

Question

我正在创建一个 React WordPress 博客。现在我正在发送一个 JSON 请求并获取所有帖子，这工作正常）一旦我有了它，我就会为每个帖子创建一个帖子对象。

我可以正确显示标题、图像等。但是，当我尝试使用 post.content.rendered 显示帖子内容时（我取前 250 个字符进行预览），它在输出中显示实际的 html它不是打印“Hello World”，而是打印

<p>Hello World</p>

我从 /wp-json/wp/v2/posts 成功获取 json 响应，并且在下面的代码中返回帖子信息。

return (
    <article className="post-outer" id={post.id}>
      <section className="post-section">
        <a className="post-link">
          <div className="post-box" >
            <h1 className="post-title">
              {post.title.rendered}
            </h1>
            <p className="post-desc">
              {post.content.rendered.substring(0,250)}
            </p>
            </div>
          <figure className="media-wrapper"><img src={ this.state.media } /></figure>
        </a>
      </section>
    </article>
  )

Answer 1

用于dangerouslySetInnerHTML渲染 html 字符串：

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

dangerouslySetInnerHTML是 ReactinnerHTML在浏览器中使用的替代品，当您使用它时，它会DOM在幕后告诉您该组件内部的 HTML 不是它关心的东西。dangerouslySetInnerHTMLReact

检查这个例子：

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

let a = "<p>Hello</p>";
let b = "<p>Hello";
let c = "<p>Hello<";
let d = "<p>Hello</";

class App extends React.Component{
   
   render(){
     return(<div>
       <div dangerouslySetInnerHTML={{__html: a}}></div>
       <div dangerouslySetInnerHTML={{__html: b}}></div>
       <div dangerouslySetInnerHTML={{__html: c}}></div>
       <div dangerouslySetInnerHTML={{__html: d}}></div>
      </div>
     )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'))