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

Posted 2023-03-27

【中文标题】WP API 和 React 呈现 HTML，而不是文本

【英文标题】：WP API and React rendering HTML, not text

【发布时间】：2017-07-22 17:34:53

【问题描述】：

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

我可以正确显示标题、图像等。但是，当我尝试使用 post.content.rendered 显示帖子的内容时（我使用前 250 个字符进行预览）它在例如输出而不是打印“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>
  )

【参考方案1】：

使用dangerouslySetInnerhtml 渲染html字符串：

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

dangerouslySetInnerHTML 是 React 在浏览器 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'/>

【讨论】：

知道如何只显示 html 输出的前 250 个字符吗？

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