在antd卡头上添加图标和标题

编程问答 2022-06-06

问题描述

我正在尝试在antd响应式卡片中添加标题和图标，但无法为其添加和找到任何解决方案，任何人都可以帮我解决这个问题，因为我对此还很陌生，我无法弄清楚出来

const data = [
{
title: 'Title 1',},{
title:  <SearchOutlined />'Title 2',];

ReactDOM.render(
<List
grid={{
gutter: 16,xs: 1,sm: 2,md: 4,lg: 4,xl: 6,xxl: 3,}}
dataSource={data}
renderItem={item => (
<List.Item>
<Card title={item.title}>Card content</Card>
</List.Item>
)}
/>,document.getElementById('container'),);

解决方法

您很近。只需在标题内容中加上react片段

const data = [
  {
    title: "Title 1",content: (
      <div>Content 1</div>
    )
  },{
    title: (
      <>
        <SearchOutlined /> Title 2
      </>
    ),content: (
       <div>Content 2</div>
    )
  }
];

<List
    dataSource={data}
    renderItem={item => (
        <List.Item>
           <Card title={item.title}>{item.content}</Card>
        </List.Item>
     )}
/>
antdcardreactjsreactjsresponsive