Question

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

这是标题在DB中的显示方式：

Hello world! I'm leaving

这是我用来从DB中检索标题的代码：

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

这是帖子标题在呈现时的外观：

Hello world! I&#8217;m leaving

char＆＃39;被转义，用于转义的反斜杠被编码。

另一方面，从帖子呈现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 API可以直接工作，而无需BE或FE中的特殊编码/解码。我做错了吗？

由于

Answer 1

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

类似的东西：

＆＃13;

renderStr() {
  return {__html: this.state.dataToRender};
},

render() {
  return <div dangerouslySetInnerHTML={renderStr()} />;
}

＆＃13;

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