React实现简单易用Toast

March 10, 2019 9068

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

效果图

使用方法

1
2
3
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的关键）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// 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);
    this.state = {
      notices: [], // 存储当前有的notices
      hasMask: true // 是否显示蒙版
    };
  }
  add(notice) {
    // 添加notice
    // 创造一个不重复的key
    const { notices } = this.state;
    const key = notice.key ? notice.key : (notice.key = getUuid());
    const mask = notice.mask ? notice.mask : false;
    const temp = notices.filter(item => item.key === key).length;

    if (!temp) {
      // 不存在重复的 添加
      notices.push(notice);
      this.setState({
        notices: notices,
        hasMask: mask
      });
    }
  }
  remove(key) {
    // 根据key删除对应
    this.setState(previousState => {
      return {
        notices: previousState.notices.filter(notice => notice.key !== key)
      };
    });
  }
  getNoticeDOM() {
    const _this = this;
    const { notices } = this.state;
    let result = [];

    notices.map(notice => {
      // 每个Notice onClose的时候 删除掉notices中对应key的notice
      const closeCallback = () => {
        _this.remove(notice.key);
        // 如果有用户传入的onClose 执行
        if (notice.onClose) notice.onClose();
      };

      result.push(
        <Notice key={notice.key} {...notice} onClose={closeCallback} />
      );
    });

    return result;
  }
  getMaskDOM() {
    const { notices, hasMask } = this.state;
    // notices为空的时候 不显示蒙版
    // 始终只有一个蒙版
    if (notices.length > 0 && hasMask == true)
      return <div className="tips-mask" />;
  }
  render() {
    const noticesDOM = this.getNoticeDOM();
    //暂时没有配置蒙版
    const maskDOM = this.getMaskDOM();
    return (
      <div>
        {/*{maskDOM}*/}
        {noticesDOM}
      </div>
    );
  }
}

 // Notification增加一个重写方法
  // 该方法方便Notification组件动态添加到页面中和重写
Notification.reWrite = properties => {
  const { ...props } = properties || {};

  let div = document.createElement("div");
  document.body.appendChild(div);

  const notification = ReactDOM.render(<Notification {...props} />, div);

  return {
    notice(noticeProps) {
      notification.add(noticeProps);
    },
    removeNotice(key) {
      notification.remove(key);
    },
    destroy() {
      ReactDOM.unmountComponentAtNode(div);
      document.body.removeChild(div);
    },
    component: notification
  };
};

Notice

主要是负责接受一些参数，duration，icon，content等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Notice是Toast最底层组件
// 每个toast的小框框其实都是一个Notice
// Notice核心就是组件初始化的时候 生成一个定时器
// 根据输入的时间 加载一个动画 然后执行输入的回调
// Notice的显示和隐藏收到父组件Notification的绝对控制
import React from "react";
import classNames from "classnames";
import { PropTypes } from "prop-types";

export default class Notice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shouldClose: false // 是否开启关闭动画
    };
  }
  componentDidMount() {
    if (this.props.duration > 0) {
      this.closeTimer = setTimeout(() => {
        this.close();
      }, this.props.duration - 300); // 减掉消失动画300毫秒
    }
  }
  componentWillUnmount() {
    // 当有意外关闭的时候 清掉定时器
    this.clearCloseTimer();
  }
  clearCloseTimer() {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer);
      this.closeTimer = null;
    }
  }
  close() {
    // 关闭的时候 应该先清掉倒数定时器
    // 然后开启过场动画
    // 等待动画结束 执行回调
    this.clearCloseTimer();
    const _this = this;
    _this.setState({ shouldClose: true });
    this.timer = setTimeout(() => {
      if (this.props.onClose) {
        this.props.onClose();
      }
      clearTimeout(_this.timer);
    }, 300);
  }
  render() {
    const { shouldClose } = this.state;
    return <div className={classNames({ leave: shouldClose })}>
        {this.props.content}
      </div>
  }
}

Notice.propTypes = {
  duration: PropTypes.number, // Notice显示时间
  content: PropTypes.any, // Notice显示的内容
  onClose: PropTypes.func // 显示结束回调
};

Notice.defaultProps = {
  duration: 3000
};

Toast

Toast首先就是要利用Notification.reWrite初始化一个newNotification，并且保持这个Notification为单例。
然后封装一个notice方法，动态的改变这个newNotification。
最后封装几个常用notice方法暴露出去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React from "react";
import classNames from "classnames";
import Notification from "./Notification";
// Toast组件比较特殊
// 因为<Toast />不会被直接渲染在DOM中
// 而是动态插入页面中
// Toast组件核心就是通过Notification暴露的重写方法 动态改变Notification
let newNotification;

// 获得一个Notification
const getNewNotification = () => {
  // 单例 保持页面始终只有一个Notification
  if (!newNotification) {
    newNotification = Notification.reWrite();
  }

  return newNotification;
};
// notice方法实际上就是集合参数 完成对Notification的改变
const notice = (content, type, duration = 3000, onClose, mask = true) => {
  if (!content) return;

//   content = content.toString();

  let notificationInstance = getNewNotification();

  notificationInstance.notice({
    duration,
    mask: mask,
    content: (
      <div className={classNames(["tips-notice-box"])}>
        <div
          className={classNames([
            "tips-notice-content",
            { info: type === "info" },
            { success: type === "success" },
            { warning: type === "warning" },
            { error: type === "error" }
          ])}
        >
          {content}
        </div>
      </div>
    ),
    onClose: () => {
      if (onClose) onClose();
    }
  });
};

export default {
  show(content, duration, icon, mask, onClose) {
    return notice(content, undefined, icon, duration, onClose, mask);
  },
  info(content, duration, icon, mask, onClose) {
    return notice(content, "info", icon, duration, onClose, mask);
  },
  success(content, duration, icon, mask, onClose) {
    return notice(content, "success", icon, duration, onClose, mask);
  },
  warning(content, duration, icon, mask, onClose) {
    return notice(content, "warning", icon, duration, onClose, mask);
  },
  error(content, duration, icon, mask, onClose) {
    return notice(content, "error", icon, duration, onClose, mask);
  },
  hide() {
    if (newNotification) {
      newNotification.destroy();
      newNotification = null;
    }
  }
};
查看评论