如何将 HTMLElement 转换为 JSX.Element答案

【问题标题】：How to convert HTMLElement to JSX.Element如何将 HTMLElement 转换为 JSX.Element
【发布时间】：2021-11-24 13:19:55
【问题描述】：

这里我有类似下面的 HTMLElement

<div id='hiddenDiv'>
  <div>foobar</div>
</div>

我正在做类似下面的尝试将其转换为 JSX.Element：

function renderMailCompose(): JSX.Element {
    const content = document.getElementById('hiddenDiv');
    return content;
}

但我得到了错误

类型“HTMLElement”缺少类型中的以下属性 'ReactElement'：类型、道具、键

我想知道如何正确地将包含其所有内容的 div 转换为 JSX.Element。任何帮助将不胜感激！

【问题讨论】：

我知道这是来自一个字符串，但这有帮助吗？ stackoverflow.com/questions/56675652/…

标签： javascript reactjs typescript

【解决方案1】：

一般来说，除非你有特定的理由使用getElementById，否则我们通常想要做的是使用内置的useRef钩子来在React中的变量中存储元素。

所以你可以这样做 -

const hiddenDivRef = useRef<HTMLDivElement>(null);

return (
  <div ref={hiddenDivRef}>
    <div>foobar</div>
  </div>
);

之后我们可以像这样访问值 -

console.log(hiddenDivRef.current);

您还可以使用您通常拥有的所有相关功能，
即 - .focus() 等...

注意：钩子并不是存储元素所独有的。

【讨论】：

【解决方案2】：

你可以使用 html-react-parser 像这样渲染 html：

npm install html-react-parser --save

import parse from 'html-react-parser';

function renderMailCompose(): JSX.Element {
    const content = document.getElementById('hiddenDiv');
    return parse(content.innerHTML);
}

【讨论】：