Component definition is missing display name react/display-name消息可能来自eslint之类的工具。
这是一个提示规则，它的存在是为了帮助您在编写React代码时遵循有关良好实践的样式指南和/或约定。
eslint中的这条特殊规则将在下面详细解释：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
在该页面中，您还可以找到它存在的 * 原因 * 以及React Components上的displayName属性的好处，即在调试时提供帮助，因为它意味着它将组件的displayName属性打印到控制台，而不仅仅是input。
此外，从该链接中，您可以发现当您使用函数组件时，可以通过设置组件的displayName属性来解决这个问题。

import React from "react";

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

export default Search;

另一种选择是禁用特定的linter，在组件声明上方使用带有// eslint-disable-next-line react/display-name或类似内容的注解。
然而，这意味着如果您需要调试应用，则只需将此组件命名为input而不是Search，这可能会使调试变得有点困难。

我最近遇到了同样的问题，并以这种方式解决了它。可能不是最漂亮的，但可能是首选的一些。其中ComponentName是React的名称和ExportName是你将在其他地方导入。

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;

这样，你就可以解决这个问题了。我建议我们最好知道为什么eslint限制写作的方式

您可以使用一个命名的函数（参见function Search）来代替匿名箭头fn，如下例所示。

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

export default Search;

除了Larsson的回答（我认为这是应该做的），如果你仍然想有打字，你可以这样做：

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);

将此放在文件的开头：
/* eslint-disable react/display-name */
你也可以试试这个：// eslint-disable-next-line react/display-name

所有的答案都使用类型，下面是我们使用接口的解决方案：

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);

我今天遇到了类似的问题。我使用@fluentui的详细信息列表：每一列都有一个可选的属性onRender，它传递当前项，这样你就可以返回一个定制的组件来格式化你的数据。onRender: (item: PlannerTask) => <TitleColumn item={item} />。这给了我错误。我找到了两种方法来修复它。

瓦里安1：给予孩子取个名字

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

变体2（我最终做了什么）：

在我的组件文件中，我还导出了一个返回组件的函数：

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

然后我就传递这个：

onRender: createTitleColumn

结论

我最喜欢这个变体，因为它不会使事情过于复杂，而且我个人认为第二个选项也非常可读。
总的来说，我认为eslint错误在我的例子中是一个误报，因为我的原始代码没有任何错误，但是我尽量避免禁用lint或编译器错误/规则，因为它们的存在不仅仅是为了烦扰我们;）

这是我的解决方案，以前的不适合我：

import React, { forwardRef, Ref } from 'react';
import { SliderItemContainer, SliderItemContent } from '../styles/SliderItem.styles';
import { SliderItemType } from '../utils/Slider.data';

type SliderItemProps = {
  item: SliderItemType;
};

const SliderItem = ({ item }: SliderItemProps, ref: Ref<HTMLDivElement>) => {
  return (
    <SliderItemContainer ref={ref} image={item.image}>
      <SliderItemContent>
        <h1>{item.title}</h1>
        <p>{item.description}</p>
        <button>{item.buttonText}</button>
      </SliderItemContent>
    </SliderItemContainer>
  );
};

export default forwardRef(SliderItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

组件之外的用法也很简单，我只是用motion Package 了SliderItem组件，将其命名为MotionSliderItem。

const MotionSliderItem = motion(SliderItem);
<MotionSliderItem ..... />