Before writing: spare time, antD found this component interesting, then imitate writing to play, do not like spray, hope to make suggestions.

First, the effect picture:

Message.js

import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./style.less"; const div = document.createElement("div"); document.body.appendChild(div); function notice(args) { return ReactDOM.render(<Message {... args} />, div); } let timer; function Message(props) { const [msgs, setMsgs] = useState([]); const { content, type } = props; const iconObj = { info: "mf-icon-information", success: " mf-icon-selected2", warn: "mf-icon-Prompt", error: " mf-icon-remove", }; useEffect(() => { setMsgs([...msgs, props]); }, [props]); useEffect(() => { if (msgs.length) { let msgscopy = JSON.parse(JSON.stringify(msgs)); // setInterval: clearInterval(timer); timer = setInterval( (setMsgs) => { msgscopy.shift(); setMsgs(JSON.parse(JSON.stringify(msgscopy))); if (! msgscopy.length) { clearInterval(timer); } }, props.duration * 1000, setMsgs ); // clearTimeout(timer); // let fn = (setMsgs) => { // msgscopy.shift(); // setMsgs(JSON.parse(JSON.stringify(msgscopy))); // if (msgscopy.length) { // timer = setTimeout(fn, props.duration * 1000, setMsgs); / / / /}}; // timer = setTimeout(fn, props.duration * 1000, setMsgs); } }, [msgs]); return ( <div className="message"> {msgs.map((item, index) => { return ( <div className="message-content" key={index}> <i className={`${iconObj[type]} message-content-icon`  }></i> <span className="message-content-text">{content}</span> </div> ); })} </div> ); } let api = {}; ["info", "success", "warn", "error"].forEach((type) => { api[type] = (content, duration = 3) => { return notice({ content, duration, type }); }; }); export default api; // This component contains only "info", "success", "WARN ", and "error". // 'duration' indicates the duration; // See Ant Design for details.Copy the code

style.less

.message { position: fixed; top: 85px; left: 50%; transform: translate(-50%, 0); z-index: 1000; &-content { max-width: 800px; Background: Rgba (0, 0, 0, 0.6); padding: 13px 64px; border-radius: 6px; margin-top: 8px; font-size: 14px; font-family: Avenir-Medium, Avenir; font-weight: 500; color: rgba(255, 255, 255, 1); line-height: 22px; display: flex; align-items: flex-start; &-icon{ margin-right: 8px; font-size: 20px; }}}Copy the code
  • In this formReactDOM.render(<Message {... args} />, div);To join ReactElement and DOMElement;
  • By calling thenotice()Method to dynamically render content;
  • msgsArray to display multiple and undisplaymessageComponents;

Index.js

import React from "react"; import message from "./Message"; Function Index (){const handleClick = ()=>{message.warn(' I am a global alert component '); // message.info(' I am a global prompt component '); Follow this method for other prompt types. // message.info(' I am a global prompt component ', 4); The second parameter is the custom duration. } return ( <div> <button onClick={handleClick}>click me</button> </div> ) } export default Index;Copy the code