WP API 和 React 渲染 HTML，而不是文本 [英] WP API and React rendering HTML, not text

问题描述

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

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

Hello World

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

返回 (<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}<p className="post-desc">{post.content.rendered.substring(0,250)}</p>

<figure className="media-wrapper"><img src={ this.state.media }/></figure></a></节></文章>)

解决方案

使用 dangerouslySetInnerHTML 来渲染 html 字符串:

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

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

检查这个例子:

let a = "<p>Hello</p>";让 b = "<p>你好";让 c = "<p>你好<";让 d = "<p>你好</";类 App 扩展了 React.Component{使成为(){返回(
<div risklySetInnerHTML={{__html: a}}></div><div risklySetInnerHTML={{__html: b}}></div><div risklySetInnerHTML={{__html: c}}></div><div 危险地SetInnerHTML={{__html: d}}></div>
)}}ReactDOM.render(, 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'/>

I am creating a react wordpress blog. Right now I am sending a JSON request and getting all of the posts, this is working properly ) Once I have that I am creating a post object for each post.

I can properly display the title, image, etc. However when I try to display the content of the post using post.content.rendered ( i take the first 250 characters for a preview ) It is showing the actual html in the output for example instead of printing "Hello World" it is printing

<p>Hello World</p>

I am getting the json response successfully from: /wp-json/wp/v2/posts and i am returning the post info in the code below.

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>
  )

解决方案

Use dangerouslySetInnerHTML to render html strings:

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

dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM, behind the scenes when you use dangerouslySetInnerHTML it lets React know that the HTML inside of that component is not something it cares about.

Check this example:

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'/>

这篇关于WP API 和 React 渲染 HTML，而不是文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！