Tengo lo siguiente (usando Material UI)....
import React from "react"; import { NavLink } from "react-router-dom"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; function LinkTab(link){ return <Tab component={NavLink} to={link.link} label={link.label} value={link.link} key={link.link} />; }En las nuevas versiones esto provoca la siguiente advertencia...
Advertencia: los componentes de función no se pueden dar refs. Los intentos de acceder a esta referencia fallarán. ¿Querías usar React.forwardRef()?
Compruebe el método de renderizado de
ForwardRef. en NavLink (creado por ForwardRef)
Intenté cambiar a...
function LinkTab(link){ // See https://material-ui.com/guides/composition/#caveat-with-refs const MyLink = React.forwardRef((props, ref) => <NavLink {...props} ref={ref} />); return <Tab component={MyLink} to={link.link} label={link.label} value={link.link} key={link.link} />; }Pero todavía recibo la advertencia. ¿Cómo resuelvo este problema?
NavLink de react-router es un componente de función que es una versión especializada de Link que expone un accesorio innerRef para ese propósito.
// required for react-router-dom < 6.0.0 // see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678 const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />); También podría haber buscado en nuestros documentos para react-router que lo lleva a https://mui.com/getting-started/faq/#how-do-i-use-react-router que enlaza con https://mui .com/components/buttons/#third-party-routing-library . El último enlace proporciona un ejemplo de trabajo y también explica cómo esto probablemente cambiará en react-router v6
Solo dale como innerRef ,
// Client.js <Input innerRef={inputRef} /> Úselo como ref .
// Input.js const Input = ({ innerRef }) => { return ( <div> <input ref={innerRef} /> </div> ) }Puede usar refs en lugar de ref . Esto solo funciona porque evita el nombre especial de la propiedad ref .
<InputText label="Phone Number" name="phoneNumber" refs={register({ required: true })} error={errors.phoneNumber ? true : false} icon={MailIcon} />