Estoy trabajando en una biblioteca que requiere exportar un par de funciones para que los usuarios las soliciten. Esas funciones necesitan acceso a la referencia del componente para agregar/eliminar nombres de clase y desplazamiento automático, etc.
Pude hacer que funcionara moviendo mi referencia (creada por React.createRef ) fuera del componente en sí (NO hablando de definirlo fuera del constructor sino dentro del componente)
Así es como se ve mi código (usé un componente de clase en lugar de funcional ya que el gancho useRef obviamente no se puede usar afuera)
import React, { PureComponent, createRef } from "react"; import { typingEffect } from "../redux/actions/dispatch"; import { containerRef } from "./Container"; let typingRef = createRef(); export async function displayTypingEffect() { await typingEffect(); typingRef.current.className += " rcb-is-typing"; containerRef.current.scrollTop = containerRef.current.scrollHeight + 700; } export function hideTypingEffect() { typingRef.current.className = "rcb-typing-container"; containerRef.current.scrollTop = containerRef.current.scrollHeight + 700; } export default class Typing extends PureComponent { render() { return ( <div ref={typingRef}> rest of the component code which is unnecessary for this question </div> ) }Me pregunto si existe la posibilidad de problemas o errores imprevistos si sigo este patrón.
Gracias.
Esto hace que el typingRef
typingRef será el mismo objeto para cada instancia del componente Typing , es decir, si se crean dos componentes a partir de la clase Typing , ambos escribirán en el mismo typingRef . Su API proporcionará acceso a algún elemento DOM, pero no puede estar seguro de cuál es actualmente.
typingRef se crea tan pronto como se importa el archivo, incluso antes de que se inicie React, y vivirá durante la vida útil del código Javascript, no durante la vida útil de ningún componente de React.
Creo (no estoy 100% seguro) que cualquier elemento DOM al que se haga referencia typingRef se mantendrá (al menos) hasta typingRef se sobrescriba (o finalice la ejecución de Javascript). Entonces, si un componente de escritura se desmonta, el elemento DOM (y todo lo que está conectado a él) aún se mantiene en la memoria. Por lo tanto, su API proporcionará acceso a elementos DOM "inútiles".