Estaba tratando de pasar una función de devolución de llamada al objeto ref de un componente que usa la referencia directa para pasar a un componente de clase. Me di cuenta de que la función de devolución de llamada solo se activa una vez, por lo que no puedo obtener los cambios en el Elemento.

No estoy seguro de cuál es el problema, ¿podría ayudarme con esto?

El componente al que estoy pasando la referencia.

 class ElemComponent extends Component { constructor(props) { super(props); this.state = { value: '', }; this.ElemComponentRef = props.forwardRef || React.createRef(); } render() { return ( <div ref={this.ElemComponentRef}> Div has a ref </div> ) } } export default React.forwardRef((props, ref) => <ElemComponent forwardRef={ref} {...props} />);

Mi componente principal

 const App = () => { const [value, setValue] = React.useState(""); return ( <> <button onClick={() => { setValue("white" + value); }} > Click </button> <MyForwardElement value={value} ref={() => console.log("this is the ref")} /> </> ); };

 this.ElemComponentRef = props.forwardRef || React.createRef();

Eliminando el código anterior para

 <div ref={this.props.forwardRef}>

está resolviendo mi problema pero necesito el objeto ref incluso si no se pasa

Realmente no puedo actualizar el componente secundario a un componente funcional en este momento, si hay alguna solución/explicación para esto, sería realmente útil.

Gracias