Todas las respuestas aquí usando tipos, aquí está nuestra solución con interfaces:

 import { Ref, forwardRef } from 'react'; interface Props { "foo": string } const Input = ({ foo }: Props, ref: Ref<HTMLInputElement>) => { return <input foo={foo} ref={ref} type="text" />; }; export default forwardRef(Input);

Podría usar una función con nombre (vea function Search ) en lugar de la flecha anónima fn, como en el ejemplo a continuación.

 const Search = React.forwardRef<HTMLInputElement>(function Search(props, ref) { return <input ref={ref} type="search" />; }); export default Search;

Además de la respuesta de Larsson (que creo que es el camino a seguir), si aún desea tener los tipos, puede hacer algo como esto:

 import { forwardRef, ForwardRefRenderFunction } from "react"; type MyComponentProps = { something: string; } type RefProps = { something: string; } const MyComponent: ForwardRefRenderFunction<RefProps, MyComponentProps> = (props, ref) => { return <div>Works</div>; } export default forwardRef(MyComponent);

Tuve un problema similar hoy. Uso la Lista de detalles de @fluentui: cada columna tiene una propiedad opcional onRender que pasa el elemento actual para que pueda devolver un componente personalizado para formatear sus datos. Estaba intentando algo como esto: onRender: (item: PlannerTask) => <TitleColumn item={item} /> . Esto me dio el error. Encontré dos formas de arreglarlo para mí.

Variante 1: Ponle un nombre al niño

 onRender: function titleColumn (item: PlannerTask) { return <TitleColumn item={item} /> }

Variante 2 (lo que finalmente hice):

En mi archivo de componentes también exporto una función que devuelve el componente:

 export const createTitleColumn = (item: PlannerTask): JSX.Element => { return <TitleColumn item={item} /> }

Entonces solo paso esto:

 onRender: createTitleColumn

Conclusión

Me gusta más esta variante porque no complica demasiado las cosas y personalmente encontré que la segunda opción también es muy legible.

En general, creo que el error de eslint fue un falso positivo en mi caso, porque no hay nada malo con mi código original. Sin embargo, trato de evitar deshabilitar el linting o los errores/reglas del compilador, porque no solo existen para molestarnos;)

Recientemente tuve el mismo problema y lo resolví de esta manera. Puede que no sea el más bonito, pero podría ser preferido a algunos. Donde ComponentName es el nombre de React y ExportName es lo que importará en otros lugares.

 const ComponentName = (props, ref) => { return ( <div ref={ref}></div> ); }; export const ExportName = forwardRef(ComponentName);

import React from "react"; const Search = React.forwardRef<HTMLInputElement>(function Search(props, ref) { return <input ref={ref} type="search" />; }); export default Search;

De esta manera, puede solucionar el problema. Sugiero que sea mejor que sepamos por qué eslint limita la forma de escribir

Pon esto al principio de tu archivo:

/* eslint-disable react/display-name */

También puedes probar esto: // eslint-disable-next-line react/display-name

A la Component definition is missing display name react/display-name .

Es una regla de linting que existe para ayudarlo a seguir las guías de estilo y/o las convenciones con respecto a lo que se considera una buena práctica al escribir código React.

Esa regla particular en eslint se explica con más detalles aquí: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

Desde esa página también puede encontrar por qué existe y para qué sirve la propiedad displayName en React Components, es decir, para ayudar durante la depuración, ya que significa que imprimirá la propiedad displayName de su componente en la consola en lugar de solo input .

Además, desde ese enlace, puede encontrar que cuando usa componentes de función, puede abordarlo configurando la propiedad displayName en el componente. Esto probablemente debería ayudarte:

 import React from "react"; const Search = React.forwardRef<HTMLInputElement>((props, ref) => { return <input ref={ref} type="search" />; }); Search.displayName = "Search"; export default Search;

Otra opción es simplemente deshabilitar ese linter en particular, usando un comentario con // eslint-disable-next-line react/display-name o similar justo encima de la declaración de su componente.

Sin embargo, eso significaría que si tuviera que depurar su aplicación, este componente simplemente se llamaría input en lugar de Search , lo que podría dificultar un poco la depuración.