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

nametypedefaultdescription
componentReact.Element/String‘span’wrap dom node or component for children. set to ‘’ if you do not wrap for only one child
componentPropsObject{}extra props that will be passed to component
showPropString控制显示隐藏的属性
exclusiveBoolean
transitionNameString|Object平滑的类名 例:fade,整个动画所有transition相关的都会加入fade前缀
transitionAppearBooleanfalse出现时的动画
transitionEnterBooleantrue开启进入时的动画
transitionLeaveBooleantrue开启离开时的动画
onEndfunction(key:String, exists:Boolean)true动画结束时的回调
animationObject{}可以配置上面的参数

整个案例

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 对组件的样式进行抽离和分离,按功能、用途等赋予不同的样式类,分离组件样式之间的耦合性。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值