Ant 设计组件 Avatar.Group 抛出错误

Question

目前正在尝试在 React 中使用 Avatar.Group (https://ant.design/components/avatar/)。

它声明我的 package.json 的 Antd 版本是 4.5.2（4.5.0+ 用于 avatar.group 功能）

我收到此错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

有人知道怎么解决吗？

我已经导入了 Avatar 库以及许多其他库：

import { Avatar, Button .....} from 'antd';

现在，在 JSX 中，我正在测试显示的示例：

    <Avatar.Group>
      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
      <Tooltip title="Ant User" placement="top">
        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      </Tooltip>
      <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
    </Avatar.Group>

请注意，即使我之间没有任何东西

  <Avatar.Group> </Avatar.Group> 

也会出现同样的错误

Package.lock.json 和 package.json 文件：

https://justpaste.it/8m3zz

Answer 1

当您错误地导入组件时，这是一个典型的错误。

从您显示的内容来看，使用 Avatar 的组件没有错误，也不是 Avatar 组件和/或 antd 库本身的问题。

所以，如果您在实施这个新组件后遇到此错误，我会检查您是如何导入它的。

假设您正在开发一个名为 UserAvatar 的组件

import React from "react";
import { Avatar, Tooltip } from "antd";
import { UserOutlined, AntDesignOutlined } from "@ant-design/icons";

const UserAvatar = (_) => {
  return (
    <Avatar.Group>
      (...)
    </Avatar.Group>
  );
};

export default UserAvatar;

现在，假设您要从 App.js 导入此组件

import { Comp } from "./Comp";

由于组件默认导出，您应该使用：

import Comp from "./Comp";

对于您实际导入/导出 por 组件的方式有很多猜测。它甚至可能是另一个不相关的组件。但是由于我没有完整的源代码并且之前多次遇到此错误，我建议使用我上面给您的提示来检查您如何导入自定义组件。