React 16.2+能否用Fragment替代div实现dangerouslySetInnerHTML无包裹插入？

首先直接给结论：当前React版本完全不支持给<Fragment>（包括短语法<>）传递dangerouslySetInnerHTML属性。从你收到的警告就能明确这一点——React.Fragment的设计定位是无渲染的"虚拟容器"，它仅接受key和children两个合法props，任何额外属性都会被判定为无效并触发警告。

替代解决方案 #

如果你想避免额外的<div>包裹后端返回的HTML，可以试试以下几种实用方法：

1. 使用透明样式的容器元素
   给普通的<div>设置display: contents样式，这个样式会让容器元素不在DOM布局中产生任何影响，相当于一个"隐形"的包裹层：

   <div 
     key={ID} 
     style={{ display: 'contents' }} 
     dangerouslySetInnerHTML={{ __html: HTML }} 
   />
   

   如果是行内内容，也可以用<span>替代<div>，无需额外样式即可满足轻量包裹需求。

2. 封装可复用的自定义组件
   把渲染后端HTML的逻辑封装成一个组件，避免重复代码，同时保持代码整洁：

   const RawHTML = ({ html, key }) => {
     return (
       <div key={key} style={{ display: 'contents' }} dangerouslySetInnerHTML={{ __html: html }} />
     );
   };
   
   // 使用时直接调用组件
   <RawHTML html={HTML} key={ID} />
   

3. 动态创建容器元素
   如果你需要更灵活的容器类型选择，可以用React.createElement动态生成元素：

   React.createElement('span', {
     key: ID,
     dangerouslySetInnerHTML: { __html: HTML }
   })
   

关于你提交的Issue #

你提到已经在React官方仓库创建了相关功能提案Issue，其他有类似需求的开发者可以前往仓库找到该Issue并投票支持，推动官方考虑在未来版本中补充相关支持。

内容的提问来源于stack exchange，提问作者Dominik