reactjs - DevTools 中带有 React 钩子(Hook)的组件名称

Question

我刚刚将一个从基于类的类更新为一个功能性组件。

当我查看 React 的 DevTools 时，我通常会看到我的组件名为 Gallery与所有命名的状态变量。

但现在，我看到的只是一个名为 _default 的组件带有一堆非描述性的State:定义。

从其他答案中，我了解到 React Dev Tools 现在支持钩子(Hook)，但我没有看到任何组件名称错误的示例。

这是正常行为还是我做错了什么？

版本

react 16.9.0
React 开发者工具 Chrome 扩展:4.1.1
在 Firefox 中也遇到同样的问题。

组件代码

// The component
import React, { useState, useEffect } from 'react';

const Gallery = ({ images, layout }) => {
  const [showLightbox, toggleLightbox] = useState(false);
  const [activeImage, setActiveImage] = useState(false);

  return (
    // Some JSX here
  )
};

渲染代码

// Rendering the component
import React from 'react';
import { render } from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';

render(
  <Gallery images={images} />,
  document.getElementById('image-gallery'),
);

开发工具截图

Answer 1

在导出之前尝试将 displayName 添加到您的组件。检查以下链接以供引用。
DisplayName
像 Gallery.displayName = 'Gallery' 一样使用它