我刚刚将一个基于类的组件更新为函数式组件.
以前在 React 的 DevTools 中,我通常会看到我的组件名为 Gallery
,并具有所有命名状态变量.
但现在,我只能看到一个名为 _default
的组件,并带有一堆不明确的 State:
定义.
根据其他答案,我已经了解到 React Dev Tools 现在支持 hooks,但我还没有看到组件名称错误的示例。
这是正常行为还是我做错了什么?
版本信息
React 16.9.0
React Developer Tools 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'),
);
const Gallery = function Gallery({...}) { ... }
来定义组件,而不是箭头函数。是的,这是正常的行为:您正在使用 webpack(来自 CRA?)的默认导出/导入,因此它会被编译为_default
。 - Jared Smithgulp-uglify
进行代码压缩。只需要微调我的设置即可。但文档中仍然没有明确说明State:
是否应该具有实际状态名称。 - Eli Nathan