如何将HTMLElement正确转换为JSX.Element？

你通过document.getElementById获取到的是浏览器原生HTMLElement实例，而React要求的JSX.Element是React框架内部定义的虚拟DOM对象，二者结构完全不同，因此出现类型缺失报错。

根据不同使用场景可以选择以下三种方案：

方案1：静态内容直接写JSX（推荐） #

如果hiddenDiv里的内容是固定的，直接把DOM结构转写为JSX即可，性能最高也最安全：

function renderMailCompose(): JSX.Element {
  return (
    <div id='hiddenDiv'>
      <div>foobar</div>
    </div>
  )
}

方案2：动态DOM内容用dangerouslySetInnerHTML #

如果hiddenDiv的内容是动态生成、必须从当前页面DOM中读取的，可以用React的dangerouslySetInnerHTML属性把原生DOM的HTML内容注入到JSX中：

注意：仅当你完全信任该DOM内容的来源时使用此方案，避免XSS注入风险。

function renderMailCompose(): JSX.Element {
  const content = document.getElementById('hiddenDiv');
  // 先判断DOM是否存在避免空值报错
  if (!content) return <></>;
  // 保留外层hiddenDiv用outerHTML，只需要内部内容替换为innerHTML即可
  return <div dangerouslySetInnerHTML={{ __html: content.outerHTML }} />;
}

方案3：解析HTML为React节点 #

如果你需要把原生DOM转换成标准React元素结构（而非直接注入HTML字符串），可以引入HTML转React的解析工具库，对DOM的outerHTML做解析后直接返回解析后的JSX元素，适合需要对节点做后续React操作的场景。

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