antd 列表list的问题

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题分析：
这个问题主要是关于如何使antd列表中的内容不同。目前的代码中，列表中的标题都是类似"ant design part
${i}"的形式，想要将这些标题改成不同的内容，比如《论语》、《孟子》等。解决方案需要修改列表数据源中的标题部分。
解决方案：

1. 修改数据源的标题部分 ：需要修改data数组中每个对象的title属性，使其内容不同。可以直接将标题数组提前准备好，然后在map函数中按序取值，或者利用其他方式生成不同的标题。
2. 更新列表渲染逻辑 ：修改renderItem函数，使其能够正确渲染不同的标题。
   下面是具体的代码修改方案：
   javascriptCopy code

   import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
   import { Divider } from 'antd';
   import React from 'react';
   import './index.scss'
   import { Avatar, List, Space } from 'antd';
   import Roll from '../roll';
   // 准备不同的标题数组
   const titles = ["《论语》", "《孟子》", "《道德经》", "《易经》", "《老子》", "《荀子》", "《庄子》", "《孙子兵法》", "《左传》", "《史记》", "《资治通鉴》", "《水浒传》", "《红楼梦》", "《西游记》", "《三国演义》", "《鲁迅全集》", "《诗经》", "《楚辞》", "《汉乐府》", "《唐诗三百首》", "《宋词三百首》", "《元曲三百首》", "《现代诗选》"];
   const data = Array.from({ length: 23 }).map((_, i) => ({
   href: 'https://ant.design',
   title: titles[i % titles.length], // 使用取余运算来循环利用标题数组
   avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
   description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
   }));
   const IconText = ({ icon, text }) => (
   <Space>
   {React.createElement(icon)}
   {text}
   Space>
   );
   const ComPart1 = () => (
   <div className='ComPart1Box'>
   <div className="list">
   <List
   itemLayout="vertical"
   pagination={{
   onChange: (page) => {
   console.log(page);
   },
   pageSize: 3,
   }}
   dataSource={data}
   footer={
   <div>
   <b>ant designb> footer part
   div>
   }
   renderItem={(item) => (
   <List.Item
   key={item.title}
   actions={[
   <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
   <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
   <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
   ]}
   extra={
   <img
   width={272}
   alt="logo"
   src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
   />
   }
   >
   <List.Item.Meta
   avatar={<Avatar src={item.avatar} />}
   title={<a href={item.href}>{item.title}a>}
   description={item.description}
   />
   {item.content}
   List.Item>
   )}
   />
   div>
   <div className="roll">
   <Divider orientation="center">最新动态Divider>
   <Roll />
   div>
   div>
   );
   export default ComPart1;
   

   以上代码中，我使用了一个titles数组来存储不同的标题，然后在map函数中通过取余运算来循环利用这些标题。这样就能确保列表中的标题是不同的了。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑

【相关推荐】

• 这篇博客: 前端学习-Antd 组件库基础中的 2. List 组件  部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

  

  提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。

  • 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。

  Radio.Button 可作为更次级的页签来使用。

• 当某个页面需要向用户显示警告的信息时。

• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

success、info、warning、error 

"Success Text" type="success" />
"Info Text" type="info" />
"Warning Text" type="warning" />
"Error Text" type="error" />

• 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
• 另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

• 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

• 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

• 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

级联选择 Cascader - Ant Design