9

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

当我查看 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'),
);

开发工具截图

开发工具截图

4

1 回答 1

1

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

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

于 2021-04-22T08:47:05.197 回答