React实现简单易用Toast

效果图

很多项目中需要实现app中常见的提示效果Toast。这个效果看似简单，实现起来也容易，为了方便，将它封装成npm组件，方便后续使用。 这里也是抛砖引玉，可以查看项目地址一起学习react-comment-toast

使用方法

import Toast from "react-common-toast";
Toast.info("xxx");
Toast.info("xxx",duration,onClose);
复制代码

组件拆分

1. 首先是支持多个提示，不同提示定制化也可以不同。取名为Notice。
2. Notice外面还有个容器组件，用来装载Notice并且，暴露一些方法给Toast，起名Notification,是一个单例。
3. 最后就是Toast组件，负责直接生成不同的Notice，或者销毁Notification。但是其实Toast只是个对象，而不是真正意义的组件。

Notification

Notification是个容器，里面有一个notice数组。 然后render的时候，循环notices生成一段DOM节点，放到自己的div中。 同时，其还提供一个向notices中添加notice的方法（add）和根据key，在notices中删除notice的方法（remove）。 最后关键的地方，定义一个reRwrite方法，该方法接受一些参数，动态的向DOM中插入一个div，然后再向这个div中插入Notification，最后返回一个含有几个操作这个Notification的方法的对象。（这就是动态实现插入DOM的关键）

// Notification是Notice父组件，容器
// 是动态插入和删除DOM节点的核心
// 同时也向上暴露给Toast重写改变自己的方法
import React from "react";
import ReactDOM from "react-dom";
import Notice from "./Notice";
import "./toast.css";

// 统计notice总数 防止重复
let noticeNumber = 0;
// 生成唯一的id
const getUuid = () => {
  return "notification-" + new Date().getTime() + "-" + noticeNumber++;
};
export default class Notification extends React.Component {
 

  constructor(props) {
    super(props)