WP APIとリアクションレンダリングHTML、テキストではありません。

Question

私はリアクションのwordpress blogを作成しています。今はJSONリクエストを送信していて、すべてのポストを取得していますが、これは正常に動作しています）これを済ませたら、各ポストのポストオブジェクトを作成しています。

タイトルや画像などを正しく表示できます。しかし、post.content.renderedを使用して投稿のコンテンツを表示しようとすると（プレビューの最初の250文字を取ります）、実際のHTMLを表示しています/ WP-JSON/WP/V2 /ポストと私はコードでポストの情報を返しています：代わりに、印刷の例の出力には、「Hello World」の私が成功したからとJSONレスポンスを取得しています

<p>Hello World</p> 

を印刷しています以下。

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は、あなたがそれをReactを知ることができますdangerouslySetInnerHTMLを使用する場合舞台裏、ブラウザDOMでinnerHTMLを使用するための交換を反応させるのであることの内部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'/>