最容易理解的React组件封装【Message 提示框】

Message消息提示在业务中经常用到，有时候我们只是想给一个消息提示，并不需要引入ant design之类的组件库，那么就可以自己封装一个自己的Message组件。

源码地址

原理分析

做之前，我们先分析一下我们看到的消息提示框的行为。首先是从某一位置出现经过短时间移动到另一个位置，同时消息框也从隐藏到显示，然后经过一段时间后又自动回去，从显示变回消失。多次显示消息提示的时候，可以往下叠加展示，不会重叠。从这我们大致知道涉及到位置的移动和透明度的一个变化，然后这个移动过程我们可以用css3的过渡来做。

创建组件

首先使用react脚手架新建一个react项目，在src目录下创建components文件夹，在components下新建Message文件夹，然后新建index.css 和index.tsx文件。目录结构如下

然后编码提示框的内容和样式。

编码Message框架

在Message/index.tsx文件我们要定义好接受的参数和类型。主要有提示信息内容msg，提示的类型type，显示的高度top这几个字段。

interface Props {
  /**
   * 提示信息
   */
  msg: string;

  /**
   * 提示类型 success 成功/error 失败/info 常规
   */
  type: "success" | "error" | "info" | "waring";

  /**
   * 提示高度
   */
  top: number;
}

然后我们要有一个控制开关is_show来控制消息的显示和隐藏，默认是false，然后在开始渲染的时候延迟显示，因为需要一个过渡时间，所以是需要延迟显示。显示2.5秒的时候，再让提示框消失，所以这里要设置两个定时器。

  const [is_show, setIsShow] = useState(false); // 是否显示
  useEffect(() => {
    if (is_show) return;
    timer1 = setTimeout(() => {
      setIsShow(true);
    }, 10);
    timer2 = setTimeout(() => {
      setIsShow(false);
    }, 2500);
    return () => {
      clearTimeout(timer1);  // 清除定时器
      clearTimeout(timer2);  // 清除定时器
    };
  });

编写提示框样式

因为提示类型有 success 成功/error 失败/info 常规几种样式，所以要根据这几个类型编写几种样式，通过动态类去设置不同的样式。

.container {
  box-sizing: border-box;
  width: 300px;
  color: #909399;
  font-size: 13px;
  padding: 13px 10px;
  line-height: 1;
  letter-spacing: 1px;
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 4px;
  box-shadow: 0px 4px 8px 0px rgba(56, 56, 56, 0.2);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);  // 居中显示
  transition: opacity 0.3s, transform 0.5s, top 0.5s;  // 动画过渡
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.container.opacity {
  opacity: 0;
  transform: translate(-50%, -100%);
}

.container.success {
  background-color: #f0f9eb;
  color: #52c41a;
}

.container.info {
  background-color: #e9efff;
  color: #2664eb;
}

.container.error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.container .text {
  padding-left: 8px;
  user-select: none; // 禁用选择
}

显示框就样式就可以了，默认是info类型

封装message方法

使用提示框组件的时候一般是调用一个方法，不会直接使用组件。比如message(‘消息提示’)这样去使用的，所以我们还需要定义一个方法来显示提示框。

let count = 0 // 消息框显示数量
let _count = 0 // 当前消息框显示数量
export default function  message  (
  message: string,
  type: 'info' | 'waring' | 'error' | 'success' = 'info'
)  {
  let timer: NodeJS.Timeout
  const top = 42 + 58 * count
  const el = document.createElement('div')
  document.body.appendChild(el)
  const root = ReactDOM.createRoot(el)
  root.render(<Message msg={message} top={top} type={type} />)
  count++
  _count++
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  timer = setTimeout(() => {
    _count--
    // 如果当前没有消息框显示，则重置消息框数量
    if (_count === 0) count = 0
    document.body.removeChild(el)
  }, 3500) // 3.5s后自动关闭，设置时间要比在Message组件的timeout时间多一点
}

定义count计算点击显示消息框的次数，然后计算展示的高度。_count是计算连续点击时全部消息框消失后用于重置count。下面就可以测试一下使用的效果了。

index.jsx 全部代码如下

import React from 'react';
import ReactDOM from 'react-dom/client'
import { useState, useEffect } from 'react';
import './index.css';

interface Props {
  /**
   * 提示信息
   */
  msg: string;

  /**
   * 提示类型 success 成功/error 失败/info 常规
   */
  type: "success" | "error" | "info" | "waring";

  /**
   * 提示高度
   */
  top: number;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
let timer1: NodeJS.Timeout;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let timer2: NodeJS.Timeout;

function Message(props: Props) {
  const { msg } = props;
  const _type = props.type || 'info';
  const [is_show, setIsShow] = useState(false); // 是否显示
  useEffect(() => {
    if (is_show) return;
    timer1 = setTimeout(() => {
      setIsShow(true);
    }, 10);
    timer2 = setTimeout(() => {
      setIsShow(false);
    }, 2500);
    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
    };
  });

  return (
    <div
      style={{ top: props.top }}
      className={`${!is_show ? 'opacity' : ''}   ${is_show ? _type : ''} container`}
    >
       <span className='text'>{msg}</span>
    </div>
  );
}

let count = 0 // 消息框显示数量
let _count = 0 // 当前消息框显示数量
export default function  message  (
  message: string,
  type: 'info' | 'waring' | 'error' | 'success' = 'info'
)  {
  let timer: NodeJS.Timeout
  const top = 42 + 58 * count
  const el = document.createElement('div')
  document.body.appendChild(el)
  const root = ReactDOM.createRoot(el)
  root.render(<Message msg={message} top={top} type={type} />)  // 渲染到对应的div里面
  count++
  _count++
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  timer = setTimeout(() => {
    _count--
    // 如果当前没有消息框显示，则重置消息框数量
    if (_count === 0) count = 0
    document.body.removeChild(el)
  }, 3500) // 3.5s后自动关闭，设置时间要比在Message组件的timeout时间多一点
}

使用

在App.tsx中创建一个按钮，并且导入我们的message方法。

import React from 'react';
import message from './components/Message'
import './App.css';

function App() {

  const showMsg = () => {
      message('提示信息')
      //message('提示信息', 'waring')  // 警告类型
      //message('提示信息', 'error')  // 错误类型
  }
  return (
    <div className="App" id="app">
        <button onClick={showMsg}>消息提示</button>
    </div>
  );
}

export default App;

点击按钮触发事件。可以看到消息提示框显示，2.5秒后隐藏，显示隐藏都是有动画过渡的。连续点击多次也能向下展示，然后逐一消失。

总结

以上就是Message组件的封装，基本上是能满足日常业务的需要的。最近项目的组件基本都是自己去封装的，后面也会分享其他的一些组件封装，可能没有ant之类的那么专业，但是自己做的也是很有成就感的。有不足的点或者有其他想法建议的，欢迎在评论区讨论。

源码地址

精选文章

Jenkins+Github+Nginx实现前端项目自动部署

详细介绍Nuxt项目上线部署

js导出Excel文件包含单个或多个sheet的Excel文件