「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>
);
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
FogLetter9 小时前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js