const [contentRef, setContentRef] = useState<any>(null); const doc = contentRef?.contentWindow?.document; const mountNode = doc?.body; const insertionTarget = doc?.head; return ( <Box as="iframe" ref={setContentRef} {...props} > {* some code here *} </Box>Recientemente, mientras trabajaba con iframes y @emotion/react, encontré este código, pero no estoy seguro de usar useState para acceder al nodo DOM. cuando consola.log (contentRef) devuelve el nodo DOM de iframe.
¿Puede alguien explicar cómo funciona esto y en qué se diferencia del uso de useRef()?
Lo que ves allí es una " referencia de devolución de llamada".
En lugar de pasar un atributo ref creado por createRef(), pasa una función. La función recibe la instancia del componente React o el elemento HTML DOM como su argumento, que se puede almacenar y acceder desde cualquier otro lugar.
setContentRef es una función que acepta el nuevo valor de estado. Entonces, el nodo DOM se pasa a la llamada setState después de su procesamiento. Podrá acceder al nodo DOM en el estado contentRef .