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

Question

我正在使用React创建Blog。 我正计划从服务器引入博客的主要内容，并通过Props / State传递给React Component。 博客内容可以具有html标签，例如：

• 块引用
• h2和h3
• img，视频，嵌入代码等

我希望将Blog的内容与这些标记一起存储在Database / json文件中，并在页面加载时呈现该内容。 但是在React中似乎很难做到这一点。 我们可以通过三种方式实现这一目标：

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

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

使用reactjs渲染原始HTML

我的查询是：

1. 是否应该对所有流程/体系结构进行更改以解决此问题？
2. 从ajax调用插入大型html内容以响应组件以进行渲染的最佳方法是什么？
3. 要使功能完整且动态/可伸缩的Blog应该考虑哪些设计决策？
4. 如何在动态内容（例如博客内容（存储在某些文件/数据库中）中）上获得SEO。 ？

Answer 1

没有dangerouslySetInnerHTML有什么特别的。 无论是否使用React，从javascript渲染HTML总是很危险的，这取决于所述HTML的来源。 例如，如果要渲染自己创建并保存到数据库的帖子，则不会有危险（除非数据库受到威胁）。 但是，假设您对某个帖子发表了评论，并且用户发送了恶意代码作为评论。 所有其他访问该页面的用户，都将从数据库中获取恶意代码，然后在其浏览器中“危险地”执行该恶意代码。 因此，您需要做的是通过在保存到数据库之前清理所有用户输入来确保HTML源是安全的。 您可以使用一些库来实现此目的，例如-http://htmlpurifier.org/

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

确保您在url上拥有所需的所有信息，因此您不必依赖“状态”来呈现页面，如帖子ID等。您可以使用React Router- https：// github来实现。 COM / reactjs /反应路由器