React 组件之 Alert 组件

这次我们来实现一个常用的 Alert 组件，this带你来体验体验， Go， 话不多说，先放图片

往期文章 带你封装组件

• Drawer组件 juejin.cn/post/702813…
• Tag 组件 juejin.cn/post/702780…
• Upload组件 juejin.cn/post/691235…
• React hook juejin.cn/post/700908…

Alert组件比较简单，我们分析清楚他的一些操作，就可以直接写起来啦

/**
 *
 * @param {showIcon} 展示图标
 * @param {closable} 展示关闭按钮
 * @param {closeText} 自定义关闭按钮
 * @param {icon} 自定义图标，showIcon 为 true 时有效
 * @param {message} 警告内容
 * @param {description} 警告描述
 * @param {type} 警告类型 success info warning error
 * @param {onClose} 关闭触发的回调
 * @param {action} 自定义操作
 *
 *
 */

import { useState } from 'react';
import classNames from 'classnames';
import styles from './index.less';
interface IpropsAlert {
  showIcon: boolean;
  type: 'success' | 'info' | 'warning' | 'error';
  closable: boolean;
  closeText: React.ReactNode;
  icon: React.ReactNode;
  message: React.ReactNode;
  description: React.ReactNode;
  onClose: () => void;
  action: React.ReactNode;
}
type Iprops = IpropsAlert;

export const Alert: React.FC<Partial<Iprops>> = (props) => {
  const { showIcon, icon, closable, closeText, message, description, type, onClose, action } =
    props;

  const [visible, setVisible] = useState(true);

  const handleClose = () => {
    onClose && onClose();
    setVisible(false);
  };

  return (
    <>
      {visible && (
        <div
          className={classNames(
            styles.alertWarp,
            styles[`alert_type_${type}`] || styles.alert_type_warning,
          )}
        >
          <div className={styles.alertContent}>
            <div style={{ display: 'flex' }}>
              <div style={{ alignSelf: 'center', fontSize: description ? '24px' : '14' }}>
                {showIcon && <span className={styles.alertIcon}>{icon ? icon : 'icon'}</span>}
              </div>
              <div style={{ alignSelf: description ? '' : 'center' }}>
                <div className={styles.alertMes}>{message}</div>
                <div className={styles.alertDesc}>{description}</div>
              </div>
            </div>
            <div style={{ display: 'flex' }}>
              {action && <div className={styles.actionDom}>{action}</div>}
              {closable && (
                <span className={styles.closeBtn} onClick={handleClose}>
                  {closeText ? closeText : 'x'}
                </span>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

然后加一下他的样式

.alertWarp {
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 3px;
  .alertContent {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  &.alert_type_success {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
  }
  &.alert_type_info {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  &.alert_type_error {
    background-color: #fff1f0;
    border: 1px solid #ffa39e;
  }
  &.alert_type_warning {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
  }

  .alertIcon {
    margin-right: 16px;
  }

  .alertMes {
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 14px;
  }

  .alertDesc {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    word-break: break-all;
  }

  .actionDom {
    align-self: center;
    background-color: red;
  }

  .closeBtn {
    align-self: center;
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
  }
}

大功告成，如果对你有帮助，就请点个赞吧👍