全局提示message

本人已参与「新人创作礼」活动，一起开启掘金创作之路

来了来了，一天一个小组件来了

在开发过程中，我们肯定经常使用提示，用来提示用户操作是否正常，从而提升用户的使用体验，大部分都是静态调用配合函数使用的，那该组件是怎么实现的呢

技术栈：react，typescript，styled-components

首先我们要确保该组件是挂载在最外层的，防止被其他的组件覆盖，所以需要createRoot（也可以用ReactDOM.createPortal）帮我们把组件挂载在与id=root同一个级别的

组件参数

参数	类型
title	string
type	success，error，warning

import * as React from 'react'
import ReactDOM from 'react-dom'
import {Message as Messages} from './max'
import { createRoot } from 'react-dom/client';
import './message.less'
export const Message=(props:any)=>{
    ReactDOM.createPortal
    const dom=()=>{
        return <><Messages type={props.type}>{props.title}</Messages></>
    }
    return (
        <>
      {dom()}
      </>
    )
}
interface Parameter{
    title:string
    type:'success'|'error'|'warning'
}
Message.open = (parameter: Parameter) => {
    if (data == null) {
        const modalboxs = data = document.createElement('div')
        modalboxs.className = 'message'
        document.body.appendChild(modalboxs)
    }
    const modalbox = document.createElement('div')
    modalbox.style.position = 'relative'
    document.querySelector('.message')!.appendChild(modalbox)
    const Mes = () => {
        return <Message title={parameter.title} type={parameter.type} />
    }
    const modal = createRoot(modalbox)
    console.log(modal)
    modal.render(<Mes />)
    setTimeout(() => { modalbox.remove() }, 2800)
}


//使用
import {Message} from './message'
<button onClick={()=>{
   Message.open({type:'success',title:'点赞点赞'})
   }}> 提示</button>
<button onClick={()=>{
    Message.open({type:'error',title:'谢谢各位老板'})
   }}> 提示</button>

css的部分

import styled ,{keyframes}from 'styled-components'
const dao=keyframes`
0%{
    transform: translate(0,0);
    opacity: 0;
}
25%{
    transform: translate(0,15px);
    opacity: 1;
}
75%{
    transform: translate(0,15px);
    opacity: 1;
}
100%{
    transform: translate(0,0);
    opacity: 0;
}
`
export const Message = styled.div<{type:'success'|'error'|'warning'}>`
margin-top:15px;
max-width:150px;
padding:0 10px;
height:45px;
line-height:45px;
border-radius: 8px;
box-shadow:0px 0px 5px #5e5b5b;
background-color:${props=>{
    switch(props.type){
        case 'success':
            return '#f6ffed'
        case 'error':
            return '#fff2f0'
        case 'warning':
            return '#fffbe6'
    }
}};
animation: ${dao} 2.8s;
`

message.less

.message {
    position: fixed;
    left: 50%;
    transform: translate(-50%,0);
    top: 0;
   
}

组件的销毁和动画时间应该是一样的或者慢一些，销毁组件是防止多次使用导致页面添加多个dom

该代码可以直接使用