React forwardRef在devtools中不显示

[fncheng]

当使用 forwardRef 创建组件时，React DevTools 可能会显示该组件为 "Anonymous"，这是因为 forwardRef 会创建一个匿名的函数组件。DevTools 将其标记为匿名组件，因为在创建时没有提供显示名称。

为了使 DevTools 中显示的组件名称更具有可读性，你可以在 forwardRef 中设置 displayName。以下是一个示例：

const MyComponent = forwardRef((props, ref) => {
  // your component logic here

  return <div ref={ref}>{/* your component JSX here */}</div>;
});

MyComponent.displayName = 'MyComponent';