react制作toast组件

admin 发布于 REACT

定义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渲染组件,渲染同时可以调用组件的方法并把对应的参数传递给组件,然后组件中接收对应参数并赋值给组件

306浏览量 · 0评论 · 2020-06-19 04:19:28

全部评论  0

注册登录 进行评论

热门专题

更多专题