React：为何Chrome DevTools Elements里HTML内容带双引号？children与dangerouslySetInnerHTML哪个是最佳实践？

问题描述 #

我正在使用Next.js搭建博客。
当我将文本作为children传入组件时，为什么Chrome DevTools的Elements面板中显示的HTML内容带有双引号？
普通children写法代码：

<h1>hello world tes {props.title}</h1>

运行效果：

而通过dangerouslySetInnerHTML写入内容时，就没有出现双引号：

<h1 dangerouslySetInnerHTML={{ __html: `hello world tes ${props.title}`}} />

运行效果：

请问children和dangerouslySetInnerHTML二者哪一种是最佳实践？

解答 #

双引号的出现原因 #

这个双引号仅为Chrome DevTools的调试展示标记，不会真实出现在页面渲染结果中：

• 普通children写法下，React会将JSX中的静态文本、动态插值拆分为独立的文本节点渲染，DevTools为了区分静态文本和动态生成的文本内容，会自动给动态文本节点加上双引号标识，仅在Elements面板可见，用户实际浏览、复制内容、搜索引擎爬取都不会获取到额外引号。
• dangerouslySetInnerHTML是直接将拼接完成的整段字符串作为HTML内容注入，整段内容为单个文本节点，因此DevTools不会追加额外标识。

最佳实践选择 #

优先使用普通children写法，仅在必要场景下使用dangerouslySetInnerHTML：

• 普通children写法下React默认开启XSS防护，会自动转义动态内容中的恶意HTML、JS代码，安全性更高，同时写法符合JSX语法规范，支持组件嵌套、事件绑定等特性，可维护性更强。
• dangerouslySetInnerHTML本身存在XSS攻击风险，仅当你需要渲染可信的HTML片段（比如经过安全过滤的后台富文本内容）时再使用，使用前必须对注入内容做严格的安全校验。

内容的提问来源于stack exchange，提问作者R.M. Reza