如何将 HTMLElement 转换为 JSX.Element

Question

在这里，我有类似下面的 HTMLElement

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

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

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

但我得到了错误

类型“HTMLElement”缺少类型“ReactElement<any,any>”的以下属性：类型、道具、键

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

Answer 1

通常，除非您有使用getElementById的特定原因，否则为了在 React 中将元素存储在变量中，我们通常想要做的是使用内置的useRef钩子。

所以你可以这样做 -

const hiddenDivRef = useRef<HTMLDivElement>(null);

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

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

console.log(hiddenDivRef.current);

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

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

Answer 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);
}