使用 react 获取 wordpress 帖子显示特殊字符而不是撇号

Question

我得到的是我假设的 json 来自 wordpress 博客端点的数据，如下所示：

我正在循环浏览并暂时显示图块：

<div>{posts && posts.map((post) => <h1>{post.title.rendered}</h1>)}</div>

但是 post 标题显示不正确。例如单词 Don't 显示 Don’t

我发现我可以使用 dangerouslySetInnerHTML 来解决这个问题，但是它安全吗？它里面有 'dangerously' 这个词的事实令人担忧。

Answer 1

我相信 dangerouslySetInnerHTML 是解决这个问题的方法 - 但我会更详细地说明为什么 "dangerously" 在 "dangerouslySetInnerHTML" 中，希望这能帮助你做出根据您的情况做出明智的决定。

dangerouslySetInnerHTML 所做的是在 DOM 元素中呈现给它的任何 HTML 字符串。

例如：

<h1 dangerouslySetInnerHTML={{__html: post.title.rendered}} />

（顺便说一句，注意 __html 键有两个下划线）

将正确呈现字符串 Don’t 到 Don't。

这一切都非常无害，但是，例如，如果 post.title.rendered 的值可以由不受信任的一方（例如任意用户）设置，并且如果这个任意用户想要做一些损坏，他们可以输入一个字符串，例如：

<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>

此代码将在页面加载时由浏览器执行 - 因为 React 会生成以下 DOM:

<h1>
   <script type="text/javascript>
   // Do evil stuff
   console.log('I did some evil stuff');
   </script>
</h1>

考虑到所有这些，如果您确定此字段的值在您的控制范围内（而不是任何人else's) 并且您还知道这些字符串中不会有任何任意代码，然后继续使用 dangerouslySetInnerHTML.

但是，如果除您之外的其他人有可能操纵此字段，我会考虑 decode-html-entities 之类的东西 - 这样您就可以得到想要的演示文稿，而不会影响您的 app/users.

Getting wordpress posts with react shows special chars instead of apostrophe