Aquí tengo algo como a continuación como HTMLElement
<div id='hiddenDiv'> <div>foobar</div> </div>Y estoy haciendo algo como a continuación tratando de convertirlo en JSX.Element:
function renderMailCompose(): JSX.Element { const content = document.getElementById('hiddenDiv'); return content; }pero me sale el error
Al tipo 'HTMLElement' le faltan las siguientes propiedades del tipo 'ReactElement<any, any>': type, props, key
Me pregunto cómo puedo convertir correctamente el div, incluido todo su contenido, a JSX.Element. ¡Cualquier ayuda sería apreciada!
En general, a menos que tenga una razón específica para usar getElementById , lo que generalmente queremos hacer para almacenar elementos dentro de las variables en React es usar el gancho useRef .
Así que puedes hacer esto -
const hiddenDivRef = useRef<HTMLDivElement>(null); return ( <div ref={hiddenDivRef}> <div>foobar</div> </div> );Después de lo cual podemos acceder al valor de esta manera:
console.log(hiddenDivRef.current); También puede usar todas las funciones relevantes que normalmente tendría,
es decir - .focus() , etc...
Puede usar html-react-parser para representar html de esta manera:
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); }