使用 React 的 WordPress 模板。字符不正确

WordPress template using React. Incorrect chars

我正在使用 React 创建一个 WordPress 模板。我有一个 WP Post 在 DB 中看起来很完美。要从服务器检索数据,我使用 Axios,使用 WordPress 中包含的新 API 功能。

这是标题在数据库中的样子:

Hello world! I'm leaving

这是我用来从数据库中检索标题的代码:

axios.get('/paintings-project/wp-json/wp/v2/posts').then(
    function(response){
        self.setState({posts: response.data})
    }
);

这是 post 标题呈现时的样子:

Hello world! I’m leaving

char'被转义,转义用的反斜杠被编码

另一方面,当从 post 呈现 HTML 内容时,HTML 显示为字符串,而不是呈现为 HTML。像这样:

<h1>Welcome&#8217; to WordPress&#8217;.</h1> <p><strong>This is your first post. Edit or delete it, then start writing!</strong></p> <p>&nbsp;</p>

我希望 WordPress APIs 无需在 BE 或 FE 中进行特殊编码/解码即可直接运行。我做错了什么吗?

谢谢

React 不允许您以这种方式将字符串呈现为 HTML。您将不得不使用 dangerouslySetInnerHTML 属性 (docs) 在组件中呈现 HTML 字符串。

类似于:

renderStr() {
  return {__html: this.state.dataToRender};
},

render() {
  return <div dangerouslySetInnerHTML={renderStr()} />;
}

请记住,正如属性名称所暗示的,您需要确保您呈现的 HTML 是安全的。如果它来自用户输入,请确保在输入 storing/rendering 之前对输入进行清理,否则您和其他人可能会面临安全风险。您可以使用像 sanitizer or sanitize-html 这样的 NPM 依赖项,或者您可以自己编写一个函数来完成它。