我正在使用 React 创建博客。我计划从服务器获取博客的主要内容并通过 Props/State 传递到 React 组件。博客内容可以包含 html 标签，例如:
- block 引用
- h2 和 h3
- img、视频、嵌入代码等
我希望将博客内容与这些标签一起存储在 Database/json 文件中，并在页面加载时呈现内容。 但在React中似乎很难做到。我们可以通过三种方式实现这一目标:
- 危险地设置InnerHTML
- 将内容存储在表单数组对象 [html 内容] 中(将字符串内容插入数组不起作用)。
- 为所有 html 实体传递 unicode 字符。
这个问题很好地讨论了这些方法:
Rendering raw html with reactjs
我的查询是:
- 是否应该改变整个流程/架构来处理这个问题？
- 从 ajax 调用插入大型 html 内容到 React 组件进行渲染的最佳方法是什么？
- 应该考虑哪些设计决策来制作功能齐全且动态/可扩展的博客？
- 如何对博客内容(存储在某些文件/数据库中)等动态内容进行搜索引擎优化。 ？
最佳答案
dangerouslySetInnerHTML 没有什么特别的。无论是否使用 React，从 javascript 渲染 HTML 总是很危险，具体取决于所述 HTML 的来源。例如，如果您正在渲染自己创建的帖子并将其保存到数据库，则不会有危险(除非您的数据库已被泄露)。但假设您对某个帖子有评论，并且用户发送恶意代码作为评论。访问该页面的所有其他用户都会从数据库中获取恶意代码，并在浏览器上“危险地”执行它。因此，您需要做的是在保存到数据库之前清理所有用户输入，以确保 HTML 源的安全。您可以使用一些库来实现这一目标，例如 - http://htmlpurifier.org/
关于SEO，您可以使用服务器端渲染 - https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
确保您在网址上拥有所需的所有信息，这样您就不会依赖“状态”来呈现页面，例如帖子 ID 等。您可以通过使用 React Router 来实现这一点 - https://github.com/reactjs/react-router
关于javascript - 在 React State 中传递 html 标签的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38493320/