DevTools 中带有 React 钩子的组件名称

Question

我刚刚将 a 从基于类更新为功能组件。

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

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

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

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

版本

反应 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

尝试在导出之前向组件添加显示名称。检查以下链接以供参考。 显示名称

使用它就像Gallery.displayName = 'Gallery'