WP API和React呈现HTML，而不是文字

我正在创建一个反应WordPress博客。现在我发送一个JSON请求并获取所有帖子，这是正常工作）一旦我有，我正在为每个帖子创建一个帖子对象。WP API和React呈现HTML，而不是文字

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

<p>Hello World</p>

我成功地获得JSON响应来自：/ WP-JSON/WP/V2 /职位，我在代码返回岗位信息下面。

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

来源

2017-03-02 chris cozzens

使用dangerouslySetInnerHTML渲染HTML字符串：

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

dangerouslySetInnerHTML是，作出反应的替代浏览器DOM使用innerHTML在幕后当您使用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'/>

来源

2017-03-02 20:03:50

任何想法如何，只显示HTML输出的第250个字符？ –

如果您使用的是html字符串，那么它应该是正确的，否则它将显示为文本。检查附加的片段:) –

WP API和React呈现HTML，而不是文字

回答

相关问题