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

IT技术 wordpress reactjs
2021-05-07 14:13:20

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

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

<p>Hello World</p>

我成功地从以下位置获得了 json 响应：/wp-json/wp/v2/posts 并且我在下面的代码中返回了帖子信息。 

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>
  )
1个回答

使用dangerouslySetInnerHTML渲染HTML字符串：

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

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

检查这个例子：

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'))
<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='app'/>

其它你可能感兴趣的问题
上一篇undefined 不是一个对象（评估'_this.props.date.getFullYear'） 下一篇react组件中的绑定方法