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

Question

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

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

我收到此错误：

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

有人知道怎么解决吗？

我已经导入了 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 组件没有问题 and/or 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";

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

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

Antd design component Avatar.Group throws error

frontend

avatar

reactjs

antd

ant-design-pro