前言
下面是默认的 Antd 卡片,由以下区域组成
处理 Antd 的 Card 展示形式大致有下面三种
卡片完全不展示内容区域
const App = () => (<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}bodyStyle={{display:'none'}}><p>Card content</p></Card>
);
按需展示内容区域
引入一个状态
import React, { useState } from 'react';
import { Card, Button } from 'antd';
import 'antd/dist/reset.css';const App = () => {const [showContent, setShowContent] = useState(false);return (<Cardtitle="这是标题"extra={<a href="#">更多</a>}style={{ width: 300 }}>{showContent && (<div>这是内容区域</div>)}<Button onClick={() => setShowContent(!showContent)}>切换内容显示</Button></Card>);
};export default App;
不展示标题区域
import { Card } from 'antd';
import React from 'react';
const App = () => (<Card style={{ width: 300 }}
><p>Card content</p></Card>
);