• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

252
Vistas
Obtener TypeError cuando paso una Ref de un componente de función a otro componente de función usando forwardRef en react js,

Quiero pasar la referencia de la aplicación a Foo, App y Foo son componentes de funciones, por lo que estoy usando forwardRef() para deformar Foo, pero aparece el error de advertencia TypeError: Cannot add property current, object is not extensible . Debajo de la identificación de mi código, ¿tengo que cambiar?

 import './App.css'; import React, { useState, Component, useEffect, createRef, useRef, forwardRef } from 'react' import ReactDOM from 'react-dom' const Foo=forwardRef((inputRef)=> { const onClick = () => { inputRef.current.focus() } return ( <div> <input type="text" ref={ inputRef }></input> <button onClick={ onClick }>Focus</button> </div> ) }) function App() { const inputRef = createRef() const clicked = () => { inputRef.current.focus() } return ( <div> <Foo ref={inputRef} /> <button onClick={ clicked }>Click Foo</button> </div> ) } export default App;
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Defina ref en la función de inicio

 const inputRef = useRef(null);
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Ref Forwarding recibe dos parámetros props y ref.

 React.forwardRef((props, ref) =>{ return( <button ref={ref}>{props.children}</button> ) };

Aquí está su código editado. He agregado un tipo de referencia que es HTMLInputElement.

 type RefType = HTMLInputElement | null; interface PropsType {} const Foo = forwardRef<RefType, PropsType>((props, ref) => { const onClick = () => { if (ref && "current" in ref) { ref.current?.focus(); } }; return ( <div> <input type="text" ref={ref}></input> <button onClick={onClick}>Focus</button> </div> ); }); function App() { const inputRef = createRef<HTMLInputElement>(); const clicked = () => { inputRef.current?.focus(); }; return ( <div> <Foo ref={inputRef} /> <button onClick={clicked}>Click Foo</button> </div> ); } export default App;
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda