collapse组件样式 react_antd源码分析之——折叠面板(collapse)
目录
一、antd中的collapse
代码目录
1、组件结构图(♦♦♦重要)
2、源码节选:antd/components/collapse/collapse.tsx
3、源码节选:antd/components/collapse/CollapsePanel.tsx
二、RcCollapse
代码目录
1、组件内部属性结构及方法调用关系图(♦♦♦重要)
2、组件应用的设计模式(♦♦♦重要)
3、源码节选:rc-collapse/Collapse.jsx
4、源码节选:rc-collapse/panel.jsx
一、antd中的collapse
antd组件中有些使用了React 底层基础组件(查看具体列表点这里),collapse就是这种类型的组件
antd中collapse主要源码及组成结构如下,其中红色标注的Rc开头的组件是React底层基础组件
代码目录
1、组件结构图:
2、antd/components/collapse/collapse.tsx
export default class Collapse extends React.Component {
static Panel = CollapsePanel;
static defaultProps = {
prefixCls: 'ant-collapse',
bordered: true,
openAnimation: { ...animation, appear() { } },
};
renderExpandIcon = () => {
return (
);
}
render() {
const { prefixCls, className = '', bordered } = this.props;
const collapseClassName = classNames({
[`${prefixCls}-borderless`]: !bordered,
}, className);
return (
{...this.props}
className={collapseClassName}
expandIcon={this.renderExpandIcon}
/>
);
}
}
3、antd/components/collapse/CollapsePanel.tsx
export default class CollapsePanel extends React.Component {
render() {
const { prefixCls, className = '', showArrow = true } = this.props;
const collapsePanelClassName = classNames({
[`${prefixCls}-no-arrow`]: !showArrow,
}, className);
return ;
}
}
二、RcCollapse
由上述Collapse源码不难看出,折叠面板组件的实现逻辑主要在RcCollapse中,下面是核心代码、组件内部属性结构及方法调用关系图
代码目录
1、组件内部属性结构及方法调用关系图
2、组件应用的设计模式
这个组件中主要使用里“聪明组件和傻瓜组件”模式、“组合组件”模式
a、聪明组件和傻瓜组件:
遵循职责分离原则,把获取和管理数据的逻辑放在父组件,作为聪明组件;把渲染界面的逻辑放在子组件,也就是傻瓜组件
聪明组件:Collapse,负责获取和管理数据
getItems(),获取数据,将props中的数据传递给子组件CollapsePanel;
onClickItem(),管理数据,计算active的值传递给子组件;
傻瓜组件:Panel,只负责渲染;
根据父组件传入的数据控制渲染逻辑,如active时的渲染效果
b、组合组件:
适用场景:
Collapse组件中Collapse是一个容器,包含一个或多个CollapsePanel,可以有一个(手风琴)或多个Panel展开(active),展开的样式不同与未展开
一般实现:
每个Panel中传入isActive状态和onclick方法,在Panel内部实现渲染逻辑
缺陷:
每个Panel中要写多个props参数
每个Panel中处理onclick的相同逻辑,重复代码,增加Panel成本高
Collapse中控制active逻辑在每次新增Panel时也要修改
组合组件模式:
借助React.Children.map或React.cloneElement使列表中多个子组件的公共处理移到父组件中统一处理
Collapse中的实现:
Collapse渲染时调用this.getItems(),在this.getItems()中使用React.Children.map配置panel的onItemClick事件和activeKey等其他属性
Panel只在点击事件时调用父组件中定义的onItemClick,没有冗余代码,降低了增加Panel的成本
PS:组件设计模式详细内容可以自行查找相关资料,推荐掘金小册《React 实战:设计模式和最佳实践》,本文部分内容摘自该文
3、rc-collapse/Collapse.jsx
class Collapse extends Component {
constructor(props) {
super(props);
……this.state = {
……
};
}
componentWillReceiveProps(nextProps) {
……
}
onClickItem(key) {
……
}
getItems() {
const activeKey = this.state.activeKey;
const { prefixCls, accordion, destroyInactivePanel, expandIcon } = this.props;
const newChildren = [];
Children.forEach(this.props.children, (child, index) => {
if (!child) return;
// If there is no key provide, use the panel order as default key
const key = child.key || String(index);
const { header, headerClass, disabled } = child.props;
let isActive = false;
if (accordion) {
isActive = activeKey[0] === key;
} else {
isActive = activeKey.indexOf(key) > -1;
}
const props = {
……
openAnimation: this.state.openAnimation,
accordion,
children: child.props.children,
onItemClick: disabled ? null : () => this.onClickItem(key),
expandIcon,
};
newChildren.push(React.cloneElement(child, props));
});
return newChildren;
}
setActiveKey(activeKey) {
if (!('activeKey' in this.props)) {
this.setState({ activeKey });
}
this.props.onChange(this.props.accordion ? activeKey[0] : activeKey);
}
render() {
const { prefixCls, className, style, accordion } = this.props;
const collapseClassName = classNames({
[prefixCls]: true,
[className]: !!className,
});
return (
{this.getItems()}
);
}
}
4、rc-collapse/panel.jsx
class CollapsePanel extends Component {
handleItemClick = () => {
if (this.props.onItemClick) {
this.props.onItemClick();
}
}
handleKeyPress = (e) => {
if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
this.handleItemClick();
}
}
render() {
const {
……
} = this.props;
const headerCls = classNames(`${prefixCls}-header`, {
[headerClass]: headerClass,
});
const itemCls = classNames({
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-active`]: isActive,
[`${prefixCls}-item-disabled`]: disabled,
}, className);
let icon = null;
if (showArrow && typeof expandIcon === 'function') {
icon = React.createElement(expandIcon, { ...this.props });
}
return (
className={headerCls}
onClick={this.handleItemClick}
role={accordion ? 'tab' : 'button'}
tabIndex={disabled ? -1 : 0}
aria-expanded={`${isActive}`}
onKeyPress={this.handleKeyPress}
>
{showArrow && (icon || )}
{header}
showProp="isActive"
exclusive
component=""
animation={this.props.openAnimation}
>
prefixCls={prefixCls}
isActive={isActive}
destroyInactivePanel={destroyInactivePanel}
forceRender={forceRender}
role={accordion ? 'tabpanel' : null}
>
{children}
);
}
}
collapse组件样式 react_antd源码分析之——折叠面板(collapse)相关推荐
- antd源码分析之——折叠面板(collapse)
官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...
- vue-org-tree 组织结构图组件应用及源码分析
需求: 最近业务需要做类似思维导图的组织结构树功能,需要能动态增删改节点,且每层的节点样式并不相同 可用插件: 网上能找到的组织结构图插件有: 1.orgchart.js 地址:https://git ...
- react 调用组件方法_React源码分析1 — 组件和对象的创建(createClass,createElement)...
1 组件的创建 学习了半年前端了,感觉前端的水确实也很深.做安卓的时候就对React-Native比较感兴趣,开发H5时也使用了一段时间的ReactJS.所以决定好好分析下它的源码.文章中有不对的地方 ...
- live555 源码分析:播放启动
本文分析 live555 中,流媒体播放启动,数据开始通过 RTP/RTCP 传输的过程. 如我们在 live555 源码分析:子会话 SETUP 中看到的,一个流媒体子会话的播放启动,由 Strea ...
- live555 源码分析:子会话 SDP 行生成
如我们在前文 live555 源码分析:ServerMediaSession 中看到的,H264VideoFileServerMediaSubsession 的继承层次体系如下图: 在这个继承层次体系 ...
- live555 源码分析:ServerMediaSession
在 live555 中,用一个 ServerMediaSession 表示流媒体会话,它连接了 RTSPServer 和下层流媒体传输逻辑.ServerMediaSession 和 ServerMed ...
- Istio Pilot 源码分析(一)
张海东, 多点生活(成都)云原生开发工程师. Istio 作为目前 Servic Mesh 方案中的翘楚,吸引着越来越多的企业及开发者.越来越多的团队想将其应用于微服务的治理,但在实际落地时却因为不 ...
- live555源码分析(四)RTSPServer分析
live555源码分析系列 live555源码分析(一)live555初体验 live555源码分析(二)基本组件上 live555源码分析(三)基本组件下 live555源码分析(四)RTSPSer ...
- live555源码分析(一)live555初体验
live555源码分析系列 live555源码分析(一)live555初体验 live555源码分析(二)基本组件上 live555源码分析(三)基本组件下 live555源码分析(四)RTSPSer ...
- vue3源码分析——看看complier是怎么来解析的
引言 <<往期回顾>> vue3源码分析--手写diff算法 vue3源码分析--实现组件更新 vue3源码分析--解密nextTick的实现 想知道vue3-complier ...
最新文章
- 头号任务:CIO面临的十大挑战预测
- CCF - 201509-2 - 日期计算
- larval mysql 查询转数组_laravel 中将DB::select 得到的内容转为数组
- 三元运算 三个数取最大的
- ul去掉li前面的点_一年级语文上册期末考点:拼音重、难点总结,全面,建议收藏...
- 屏蔽非法路由,好好上网!
- TreeView 操作应用
- “明年AI会如何?”英伟达问了13位不同行业的专家
- CCF201703-1 分蛋糕(100分)【序列处理】
- linux使用中的问题 --- (cp: missing destination file operand after xxxx)
- chrome浏览器js 导出excel
- 如何卸载ultraedit_卸载不掉的软件怎么办(彻底卸载软件方法介绍)
- 开源免费CRM云端的客户管理系统SuiteCRM简介
- 汽车厂自制的流水线边 物料亮灯防错系统
- 【重磅】凯文.凯利8个小时演讲实录
- 2022年最值得去的100家互联网大厂排名出来了
- kile中*** ERROR L104: MULTIPLE PUBLIC DEFINITIONS SYMBOL: WEEK是什么意思。
- 四川电子招投标注意事项技巧
- Android性能优化系列:VSync、Choreographer 和 Render Thread
- LeetCode每日刷题Day10---L938二叉搜索树的范围和
热门文章
- 张馨予一幅画拍出几十万,然而范冰冰却一直在向粉丝要画!
- 麻雀虽小,五脏俱全-Sqlite
- 【智能制造】歌尔股份打造面向可重构和微服务的可穿戴产品智慧工厂
- PHP: Fatal error:Call to undefined function com_create_guid()
- DuerOS 走进初夏的成都
- 经典贪吃蛇大战逆向_游戏内购
- 2021东北四省赛J. Transform(空间几何)
- 微型计算机怎么插入光盘,解决Win 7读光盘“请将磁盘插入DVD驱动器”故障
- 从《如何在只有一份错误的协议的情况下,做好网络编程》论人品的重要性
- 用计算机教学体育,体育教学中计算机的应用