在React State中传递html标记的正确方式是什么

What is correct way of passing html tags in React State?

本文关键字：是什么 方式 html State React      更新时间：2023-09-26

我正在使用React创建博客。我计划把博客的主要内容从服务器上带来，并通过Props/State传递给React组件。博客内容可以有html标签，如：

  • 大宗报价
  • h2和h3
  • img、视频、嵌入代码等

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

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

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

使用reactjs 渲染原始html

我的查询是：

  1. 是否应该对整个流程/体系结构进行更改以处理此问题
  2. 从ajax调用中插入大型html内容以反应组件进行渲染的最佳方式是什么
  3. 要做出功能齐全、动态/可扩展的博客，应该考虑哪些设计决策
  4. 如何对博客内容（存储在某些文件/数据库中）等动态内容进行SEO

dangerouslySetInnerHTML没有什么特别之处。无论是否使用React，从javascript渲染HTML都可能是危险的，这取决于所述HTML的来源。例如，如果您正在呈现自己创建并保存到数据库中的帖子，则没有危险（除非您的数据库已被破坏）。但假设你在帖子上有评论，用户会发送恶意代码作为评论。所有访问该页面的其他用户都会从数据库中获取恶意代码，并在浏览器上"危险地"执行。因此，您需要做的是，通过在保存到数据库之前清除任何用户输入，确保HTML的来源是安全的。有一些库可以用来实现这一点，例如-http://htmlpurifier.org/

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

确保你在url上有所有需要的信息，这样你就不会依赖"状态"来呈现页面，比如post-id等。你可以通过使用React Router来实现这一点https://github.com/reactjs/react-router

相关文章：