antd源码分析之——折叠面板（collapse）

最新推荐文章于 2024-08-26 08:20:59 发布

superXX07

最新推荐文章于 2024-08-26 08:20:59 发布

阅读量2.5k

点赞数 1

文章标签： javascript 设计模式 ViewUI

原文链接：http://www.cnblogs.com/zs-note/p/11322468.html

版权

本文分析了antd的折叠面板组件Collapse及其内部组件RcCollapse的源码，重点探讨了组件结构、设计模式的运用，包括聪明组件与傻瓜组件模式以及组合组件模式。同时提到了在RcCollapse中如何通过React.Children.map和React.cloneElement来优化Panel的管理和渲染逻辑，降低组件成本。

摘要由CSDN通过智能技术生成

官方文档 https://ant.design/components/collapse-cn/

一、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<CollapseProps, any> {
  static Panel = CollapsePanel;

  static defaultProps = {
    prefixCls: 'ant-collapse',
    bordered: true,
    openAnimation: { ...animation, appear() { } },
  };

  renderExpandIcon = () => {
    return (
      <Icon type="right" className={`arrow`} />
    );
  }

  render() {
    const { prefixCls, className = '', bordered } = this.props;
    const collapseClassName = classNames({