使用 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’ to WordPress’.</h1> <p><strong>This is your first
post. Edit or delete it, then start writing!</strong></p> <p> </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 依赖项,或者您可以自己编写一个函数来完成它。
我正在使用 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’ to WordPress’.</h1> <p><strong>This is your first
post. Edit or delete it, then start writing!</strong></p> <p> </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 依赖项,或者您可以自己编写一个函数来完成它。