React项目使用Antd的Comment组件报错：无法找到该导出项

问题详情 #

在React项目中使用Ant Design的Comment组件，按官方示例编写代码却触发导出项未找到错误，List、Input等其他Antd组件可正常使用，已执行npm install antd完成依赖安装。

报错信息 #

ERROR in ./src/components/Idea/CommentsCard.js 142:37-44
export 'Comment' (imported as 'Comment') was not found in 'antd' (possible exports: Affix, Alert, Anchor, App, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Cascader, Checkbox, Col, Collapse, ConfigProvider, DatePicker, Descriptions, Divider, Drawer, Dropdown, Empty, FloatButton, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, Modal, Pagination, Popconfirm, Popover, Progress, QRCode, Radio, Rate, Result, Row, Segmented, Select, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Table, Tabs, Tag, TimePicker, Timeline, Tooltip, Tour, Transfer, Tree, TreeSelect, Typography, Upload, Watermark, message, notification, theme, version)

组件代码片段 #

import { Avatar, Comment, Input, List, Tooltip } from 'antd';

return (
  <List
    className="comment-list"
    header={`${data.length} replies`}
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <li>
        <Comment
          actions={item.actions}
          author={item.author}
          avatar={`https://ui-avatars.com/api/name=${item.author}&background=random`}
          content={item.content}
          datetime={item.datetime}
        />
      </li>
    )}
  />
);

解决步骤 #

• 原因分析：Antd 5.x版本重构了组件结构，Comment组件不再作为顶层导出，被整合到Typography模块下。
• 修改导入方式：
  方式一：单独导入Comment

  import { Avatar, Input, List, Tooltip } from 'antd';
  import { Comment } from 'antd/es/typography';
  

  方式二：通过Typography命名空间使用

  import { Avatar, Input, List, Tooltip, Typography } from 'antd';
  
  // 使用时替换为 <Typography.Comment />
  <Typography.Comment
    actions={item.actions}
    author={item.author}
    avatar={`https://ui-avatars.com/api/name=${item.author}&background=random`}
    content={item.content}
    datetime={item.datetime}
  />
  

• 可选降级方案：若需保留顶层导入的Comment，可降级到Antd 4.x版本

  npm install antd@4.x
  

  注意：降级后需同步检查其他组件的用法兼容性，避免出现新问题。

内容的提问来源于stack exchange，提问作者Ahmed Nizami