在React State中传递html标签的正确方法是什么？

Question

我正在使用React创建Blog。我计划从服务器带来博客的主要内容，并通过Props / State传递给React Component。博客内容可以包含以下html标签：

• BLOCKQUOTE
• h2和h3
• img，视频，嵌入代码等等

我希望在Database / json文件中存储博客内容以及这些标记，并在页面加载时呈现内容。 但似乎很难在React中做到这一点。我们有三种方法可以做到这一点：

1. dangerouslySetInnerHTML
2. 在表单数组对象中存储内容[html内容]（将字符串内容推送到数组将无效）。
3. 为所有html实体传递unicode字符。

本课题很好地讨论了这些方法：

Rendering raw html with reactjs

我的查询是：

1. 是否应对所有流量/架构进行更改以处理此问题？
2. 从ajax调用中插入大型html内容到反应组件进行渲染的最佳方法是什么？
3. 应该考虑哪些设计决策来制作功能齐全且充满活力/可扩展的博客？
4. 如何在博客内容（存储在某个文件/数据库中）等动态内容上获取SEO。吗

Answer 1

dangerouslySetInnerHTML没有什么特别之处。无论是否使用React，从javascript渲染HTML总是危险的，具体取决于所述HTML的来源。例如，如果您要呈现自己创建的帖子并保存到数据库中，那么就没有危险（除非您的数据库已被盗用）。但是，让我们说你对帖子有评论，用户发送恶意代码作为评论。访问该页面的所有其他用户将从数据库中获取恶意代码，并且危险地＆＃34;在他们的浏览器上执行它。因此，您需要做的是通过在保存到数据库之前清理任何用户输入来确保HTML的来源是安全的。您可以使用库来实现这一目标，例如 - http://htmlpurifier.org/

关于SEO，您可以使用服务器端呈现 - https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/

确保您在网址上提供了所需的所有信息，因此您不必依赖＆＃34;州＆＃34;渲染页面，如post id等。您可以使用React Router - https://github.com/reactjs/react-router

来实现