react制作toast组件

定义toast组件 ;toast.js

import React from 'react';
import "./style.css";
export default class Toast extends React.Component{
    constructor(){
        super();
        this.state={
            title:""
        }
    }
    setOpts(opts){
        this.setState({text:opts.title});
    }
    render(){
        return (
            <div className="my-toast">{this.state.title}</div>
        )
    }
}

2、定义对应样式:style.css

.my-toast{width:auto;height:auto;background-color:rgba(0,0,0,0.5);position: fixed;z-index:100;
left:50%;top:50%;transform: translate(-50%,-50%);font-size:14px;color:#FFFFFF;padding:10px;
border-radius: 2px;}

3、由于toast创建不是在<div id="app"></div>里面所以需用用document来创建元素；index.js

import React from "react";
import ReactDom from 'react-dom';
import Toast from './toast';

export default function(opts){
    //创建div元素
    let div=document.createElement("div"),duration=opts.duration || 2000;
    document.body.appendChild(div);
//将Toast和div挂载到render
    let toastInit=ReactDom.render(<Toast/>,div);
    toastInit.setOpts(opts);
    setTimeout(()=>{
       
        setTimeout(()=>{
            document.body.removeChild(div);
        },200)
        if(opts.onClose){
            opts.onClose();
        }
    },duration)
};

4、代码里调用toast

import Toast from './components/toast';
 Toast({
        title:"请输入用户名",
         duration:3000,
         onClose:()=>{
          console.log("toast已关闭");
       }
});

实现逻辑：调用的时候首先会先调用index.js中的函数，然后在index.js中先用document.createElement创建div，然后用ReactDom.render渲染组件，渲染同时可以调用组件的方法并把对应的参数传递给组件，然后组件中接收对应参数并赋值给组件