antd源码-alert解析

antd源码-alert

alert的源码不难理解，主要分为几个部分：

计算alert组件的类名

 const alertCls = classNames(
      prefixCls,// ant-alert
      `${prefixCls}-${type}`, // 样式类型
      {
        [`${prefixCls}-closing`]: closing, // 关闭中的样式
        [`${prefixCls}-with-description`]: !!description,// 描述样式类
        [`${prefixCls}-no-icon`]: !showIcon,// 没有icon的样式
        [`${prefixCls}-banner`]: !!banner, // 作为顶部功能的样式
        [`${prefixCls}-closable`]: closable,// 能否关闭的样式
      },
      className,// 传入的类名
    );

关闭按钮的组件

   const closeIcon = closable ? (
      <button
        type="button"
        onClick={this.handleClose}
        className={`${prefixCls}-close-icon`}
        tabIndex={0}
      >
        {closeText ? (
          <span className={`${prefixCls}-close-text`}>{closeText}</span>
        ) : (
          <Icon type="close" />// 默认为Icon图标 关闭按钮
        )}
      </button>
    ) : null;

icon图标组件

    const iconNode = (icon &&
      (React.isValidElement<{ className?: string }>(icon) ? (// 判断传入的是不是一个正确的react组件
        React.cloneElement(icon, {// 复制元素
          className: classNames(`${prefixCls}-icon`, { // 合并传入的class和ant-icon
            [icon.props.className as string]: icon.props.className,
          }),
        })
      ) : (
        <span className={`${prefixCls}-icon`}>{icon}</span>// 不是react组件，只是一个普通的文字的话显示这个
      ))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
		// 没有传入icon，则默认ant的icon

具体渲染alert的地方

 return closed ? null : (
      <Animate
        component=""
        showProp="data-show"
        transitionName={`${prefixCls}-slide-up`}
        onEnd={this.animationEnd}
      >
        <div data-show={!closing} className={alertCls} style={style} {...dataOrAriaProps}>
          {showIcon ? iconNode : null}
          <span className={`${prefixCls}-message`}>{message}</span>
          <span className={`${prefixCls}-description`}>{description}</span>
          {closeIcon}
        </div>
      </Animate>
    );
  };

Animate(引用自rc-animate)

我去查了rc-animate的api

name	type	default	description
component	React.Element/String	‘span’	wrap dom node or component for children. set to ‘’ if you do not wrap for only one child
componentProps	Object	{}	extra props that will be passed to component
showProp	String		控制显示隐藏的属性
exclusive	Boolean
transitionName	String|Object		平滑的类名 例：fade，整个动画所有transition相关的都会加入fade前缀
transitionAppear	Boolean	false	出现时的动画
transitionEnter	Boolean	true	开启进入时的动画
transitionLeave	Boolean	true	开启离开时的动画
onEnd	function(key:String, exists:Boolean)	true	动画结束时的回调
animation	Object	{}	可以配置上面的参数

整个案例

css
.fade-leave{
 animation: antAlertSlideUpOut 5s ease-out;
 animation-fill-mode: both;


}
.closeing{
  height: 0 !important;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform-origin: 50% 0;
  transition: all 0.3s ease-in-out;
}
    <Animate  
        component=""
        showProp='data-show'
        transitionName="fade">
        <div data-show={!enter} key="1" className={enter?'closeing':''} style={{
        display:'block',
        marginTop: '20px',
        width: '200px',
        height: '200px',
        backgroundColor: 'red',
        }}
      >
        asdasdasd
      </div>
        </Animate>

和button的wave动画不同的是，alert的动画是将元素的高度改变为0，最后移除dom，button，是加入水波样式，一定时间后自动移除动画。

总结

1. rc-animate的使用，在日常的开发工作中，我们可以运用rc-animate创造一些简单的动效，如果需要我们自己创造组件的话，

2. React api 提高对react react-dom的api理解和认知，创造组件起大作用。

   React.cloneElement( // 复制react元素，并赋予props及children
     element,
     [props],
     [...children]
   )
   React.isValidElement(object) // 检查是否react元素
   

3. 运用classnames 对组件的样式进行抽离和分离，按功能、用途等赋予不同的样式类，分离组件样式之间的耦合性。