ReactJS是一个流行的JavaScript库，用于构建客户端Web应用程序。虽然React提供了一种将组件呈现为HTML的简单方法，但有时您可能需要在React组件中呈现原始的HTML标记。本文将介绍如何在React组件中呈现原始HTML，并探讨一些相关的最佳实践和风险。
渲染原始HTML的方法
React组件通过render()方法返回一个表示该组件的视图的React元素。要呈现原始HTML，使用以下两种方法之一：
方法1：使用dangerouslySetInnerHTML属性
您可以使用React提供的dangerouslySetInnerHTML属性来设置一个对象，其中包含将被呈现为HTML的原始字符串。例如，以下组件将呈现一个包含从API获取的原始HTML的div：
------ ----- ---- --------
----- ---------------- ------- --------------- -
------------------ -
-------------
---------- - - -------- -- --
-
------------------- -
----------------------
-------------- -- ----------------
---------- -- --------------- -------- ---- ----
-
-------- -
------ ---- -------------------------- ------- ------------------ -- ---
-
-注意，将任意HTML插入页面上可以带来安全风险，这就是为什么这个属性名字叫做“危险地设置innerHTML”的原因。只有在您完全信任插入的HTML来源时，才应该使用这个技术。
方法2：手动创建DOM元素
如果您不信任要呈现的HTML字符串，或者您需要对HTML进行某些更改（例如添加事件监听器），则可以手动创建DOM元素并将其添加到React组件中。例如：
------ ----- ---- --------
----- ---------------- ------- --------------- -
------------------ -
-------------
---------- - - -------- -- --
-
------------------- -
----------------------
-------------- -- ----------------
---------- -- -
----- --------- - ------------------------------
------------------- - -----
-- -- ---- ------------ -- --------- ----- -- -------
--------------- -------- --------- ---
---
-
-------- -
------ --------------------------------
-
-最佳实践和风险
虽然呈现原始HTML可能是必要的，但它也可能会带来一些潜在的风险。以下是一些最佳实践和风险提示。
风险： XSS攻击
跨站脚本攻击（XSS）是向Web应用程序注入恶意代码的一种方式。当您允许用户提交HTML内容并将其呈现在您的网站上时，存在XSS攻击的风险。使用dangerouslySetInnerHTML属性仅在您完全信任准备呈现的HTML内容时才安全。
最佳实践： 不要将用户输入的原始HTML呈现为渲染后的HTML
即使您信任用户，也不应该直接将用户提交的HTML呈现为其所希望看到的样子。例如，如果用户在HTML中使用了<script>标记，则可能会破坏您的网站。相反，您可以使用服务器端代码（例如Node.js）来解析和过滤HTML，并将结果传递给React组件。
最佳实践： 通过CSS进行样式化
由于原始HTML可能包含外部链接的样式表或内嵌样式，因此使用dangerouslySetInnerHTML属性可能会导致样式冲突。为避免这种情况，最好使用React提供的内联样式或CSS模块进行样式化。
结论
在React
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15497