「Ant Design」Antd 中卡片如何完全不展示内容区域、按需展示内容区域、不展示标题

前言

下面是默认的 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 (
    <Card
      title="这是标题"
      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>
);
相关推荐
细节控菜鸡2 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
拉不动的猪3 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子3 小时前
nextTick的使用
前端·javascript·vue.js
Devil枫5 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript
惺忪97985 小时前
回调函数的概念
开发语言·前端·javascript
前端 贾公子5 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
天外飞雨道沧桑5 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai
qq_419854055 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js
你的电影很有趣5 小时前
lesson74:Vue条件渲染与列表优化:v-if/v-show深度对比及v-for key最佳实践
前端·javascript·vue.js
颜酱6 小时前
了解 Cypress 测试框架,给已有项目加上 Cypress 测试
前端·javascript·e2e