react笔记（八）：message消息提示组件

message消息提示,经常会用到的一个组件

思路：先写好组件和样式，以及需要自定义配置的数据，然后用函数封装一下，函数内部把组件渲染到dom中，需要用到的地方，导入调用函数，直接在方法中调用即可

新建message.tsx文件

和其他组件写法一样，就是一个普通的组件

import React from 'react'
import './message.css'

interface MessageProps {
    type?: string,//类型
    message?: string,//文本内容
}
class Message extends React.Component <any,MessageProps> {
    constructor(props:MessageProps){
        super(props);
        this.state = {
            message: this.props.message || '消息提示',//消息提示文本，没有则设置默认值
        }
    }
    render () {
        // 把type类型放到一个数组中
        let arr = ['base', 'success', 'error'];
        // 判断type是否有值，没有则设置默认值
        let type = this.props.type || 'base';
        //判断type值是否是type数组中约定好的值，如果不是就默认base类型
        type = arr.indexOf(type) ? type : 'base';
        //type同样也是css样式名的一部分，方便指定type值时设置对应的样式
        let className = `message message-${type}`;
        return  <div className={className}>
                    {this.state.message}
                </div>
    }
}


export default Message;

import React from 'react'
import './message.css'

interface MessageProps {
    type?: string,//类型
    message?: string,//文本内容
}
class Message extends React.Component <any,MessageProps> {
    constructor(props:MessageProps){
        super(props);
        this.state = {
            message: this.props.message || '消息提示',//消息提示文本，没有则设置默认值
        }
    }
    render () {
        // 把type类型放到一个数组中
        let arr = ['base', 'success', 'error'];
        // 判断type是否有值，没有则设置默认值
        let type = this.props.type || 'base';
        //判断type值是否是type数组中约定好的值，如果不是就默认base类型
        type = arr.indexOf(type) ? type : 'base';
        //type同样也是css样式名的一部分，方便指定type值时设置对应的样式
        let className = `message message-${type}`;
        return  <div className={className}>
                    {this.state.message}
                </div>
    }
}


export default Message;

组件设置了3种类型，分别是默认类型base，成功类型success，错误类型error

新建message.css文件

css最后3个class就是对应3中类型的样式表

css

.message{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 50%;
    min-width: 100px;
    padding: 12px 20px;
    font-family: "微软雅黑";
    font-size: 14px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.message-base{
    border: 1px #ddd solid;
    background: #f4f4f5;
    color: var(--color-font-shallow);
}
.message-success{
    border: 1px #d1edc4 solid;
    background: #e1f3d8;
    color: #67C23A;
}
.message-error{
    border: 1px  #fde2e2 solid;
    background: #fef0f0;
    color: #F56C6C;
}

.message{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 50%;
    min-width: 100px;
    padding: 12px 20px;
    font-family: "微软雅黑";
    font-size: 14px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.message-base{
    border: 1px #ddd solid;
    background: #f4f4f5;
    color: var(--color-font-shallow);
}
.message-success{
    border: 1px #d1edc4 solid;
    background: #e1f3d8;
    color: #67C23A;
}
.message-error{
    border: 1px  #fde2e2 solid;
    background: #fef0f0;
    color: #F56C6C;
}

然后新建Message.tsx文件,封装组件，以待调用

import React from 'react'
import ReactDOM from 'react-dom/client'
import Message from './message'


/**
 * 封装message组件函数
 * @param options:object类型 
 * options参数是组件自定义的数据：type类型，message文本，这些是message需要的props参数
 * 另外还有一个参数duration，是组件隐藏的时间，如果没有写，默认是2秒后隐藏
*/
function Message (options?:any) {
    // 初始化options
    let option = options || {};
    // 检测option如果有值是否是对象类型
    if(typeof option != 'object'){
        console.error('Message 参数不是 object');
        return false;
    }
    // 判断dom是否已经存在message组件，如果存在先不执行
    let messageDom = document.getElementsByClassName('message')[0];
    if(messageDom){
        return;
    }
    // 初始化组件隐藏时间，并设置默认值2000
    let duration = option.duration || 2000;

    // 创建组件挂载的dom，并添加到body上
    let div = document.createElement('div');
        document.body.appendChild(div);
    // 渲染组件 
    const root = ReactDOM.createRoot(div) 
    root.render(
        // 渲染组件传递props值
        <Message type={option.type} message={option.message}/>
    );
    // 定时清除组件
    let time;
    time&&clearTimeout(time); 
    time = setTimeout(() => {
        root.unmount();
        document.body.removeChild(div);
    }, duration + 500);  //这里添加500毫秒是因为暂时没有添加过滤效果，方便后续添加css动画，留的间隔时间
}
export default Message;

import React from 'react'
import ReactDOM from 'react-dom/client'
import Message from './message'


/**
 * 封装message组件函数
 * @param options:object类型 
 * options参数是组件自定义的数据：type类型，message文本，这些是message需要的props参数
 * 另外还有一个参数duration，是组件隐藏的时间，如果没有写，默认是2秒后隐藏
*/
function Message (options?:any) {
    // 初始化options
    let option = options || {};
    // 检测option如果有值是否是对象类型
    if(typeof option != 'object'){
        console.error('Message 参数不是 object');
        return false;
    }
    // 判断dom是否已经存在message组件，如果存在先不执行
    let messageDom = document.getElementsByClassName('message')[0];
    if(messageDom){
        return;
    }
    // 初始化组件隐藏时间，并设置默认值2000
    let duration = option.duration || 2000;

    // 创建组件挂载的dom，并添加到body上
    let div = document.createElement('div');
        document.body.appendChild(div);
    // 渲染组件 
    const root = ReactDOM.createRoot(div) 
    root.render(
        // 渲染组件传递props值
        <Message type={option.type} message={option.message}/>
    );
    // 定时清除组件
    let time;
    time&&clearTimeout(time); 
    time = setTimeout(() => {
        root.unmount();
        document.body.removeChild(div);
    }, duration + 500);  //这里添加500毫秒是因为暂时没有添加过滤效果，方便后续添加css动画，留的间隔时间
}
export default Message;

调用

引入message.tsx这个文件

写一个点击事件，直接调用即可

import Message from '../components/plugin/message/Message'

onClick(){
    Message();
}

import Message from '../components/plugin/message/Message'

onClick(){
    Message();
}

看一下效果

接下来看下其他类型

//成功的消息
Message({
    type:'success',
    message: '这是一条成功的消息'
})

//成功的消息
Message({
    type:'success',
    message: '这是一条成功的消息'
})

再试试error

这是一条失败的消息

 Message({
      type:'error',
      message: '这是一条失败的消息'
  })

 Message({
      type:'error',
      message: '这是一条失败的消息'
  })

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

react笔记（八）：message消息提示组件 ​

反馈信息 ​

react笔记（八）：message消息提示组件

反馈信息