如何將 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);
}