react通用组件-以toast为例

背景： 第一次使用react做项目，对所开发的通用组件进行一个思路上的整理。 在项目中，不管使用的技术栈是什么，都会出现一些通用组件，比如说toast、popup等。现在以toast为例，产出一个笔记。

效果图：

1. 在通用组件对应代码目录，创建一个toast组件的目录，以common/Toast为例

import propTypes from ‘prop-types’;
使用propTypes对props传入的所有参数进行类型上的声明和限制，
例

static propTypes = {
   
        className: propTypes.string,
        toastStyle: propTypes.object,
        duration: propTypes.number,
        closeHandler: propTypes.func,
        callbackFun: propTypes.func
    }

声明默认传入的props参数

static defaultProps = {
   
        // 样式名称
        className: '',
        // 自动关闭tost的时间
        duration: 1000,
        // tost显示的文字内容
        text: 'tost',
        // 自定义样式
        toastStyle: {
   },
        // 关闭事件handler
        closeHandler: () => {
   
        },
        // duration时间结束后的回掉函数
        callbackFun: () => {
   
        }
    }

在render中写代码结构。
通用组件export default的不是组件了，是组件的一个调用函数名，里面包含这个组件的渲染、关闭等各种功能。

export default {
   
    toastInstance: function (text, duration, toastStyle, className, callbackFun) {
   
        let toastDom = document.getElementsByClassName('frc_toast_container')[0];
        if (toastDom) {
   
            return;
        }

        let divEl = document.createElement('div');