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

Question

我刚刚将a从一个类更新为一个功能组件。

当我查看React的DevTools时，通常会看到名为card += "<input type='text'>"的组件以及所有命名的状态变量。

现在，我所看到的只是一个名为Gallery的组件，它具有许多非描述性的_default定义。

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

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

版本

反应State:

React Developer Tools Chrome扩展程序：16.9.0

在Firefox中也遇到相同的问题。

组件代码

4.1.1

渲染代码

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

Devtools屏幕截图

Answer 1

尝试在导出前向组件添加 displayName。检查以下链接以供参考。 DisplayName

像Gallery.displayName = 'Gallery'一样使用它