javascript - 如何将 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;
}

但是我得到了错误

Type 'HTMLElement' is missing the following properties from type'ReactElement<any, any>': type, props, key

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

Answer 1

一般来说，除非你有使用getElementById的特定原因，否则我们通常想做的就是使用内置的useRef来将元素存储在变量中 Hook 。

所以你可以这样做-

const hiddenDivRef = useRef<HTMLDivElement>(null);

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

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

console.log(hiddenDivRef.current);

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

• 注意:钩子(Hook)并不专用于存储元素。