javascript - 所有反应烤面包消息都需要单个块，反应烤面包失败或成功

Question

默认情况下，我们会收到 react-toastify ，如下图所示。但是现在项目需要一个块或 div 中的所有消息，一个十字按钮和通知计数在顶部，一个计时器和一个滚动条来查看所有消息。

我尝试过使用 redux，但现在需要删除 redux。请查看是否有人可以通过仅使用反应来帮助解决此问题。或者如果 react-toastify 提供此功能。

import React, { useContext, useState, useReducer } from 'react';
import { ToastContext } from './App';

import { closeToast, showToast } from '../store/toast/action';
import { connect } from 'react-redux';
const ToastContainer = styled.div`
  width: 350px;
  position: absolute;
  top: 100px;
  right: 16px;
  background: #c12335;
  z-index: 9999;
  color: white;
  padding: 12px;
  display: ${props => (props.hide ? 'none' : '')};
`;
const ViewMore = styled.div`
  text-align: right;
  margin-top: 4px;
  text-decoration: underline;
  cursor: pointer;
`;
const CloseButton = styled.div`
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
`;
const ToastList = styled.div`
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
`;

const CustomToast = props => {
  const { toastList, closeToast } = props;
  const [showAll, setShowAll] = useState(false);
  const toastCount = toastList.length;
  const list = showAll ? toastList : toastList.slice(0, 5);
  return (
    <ToastContainer hide={toastCount == 0}>
      <div>
        <CloseButton
          onClick={() => {
            setShowAll(false);
            closeToast();
          }}
        >
          x
        </CloseButton>
        {toastCount} New Notifications
      </div>
      <PerfectScrollbar>
        <ToastList>
          {list.map((toastContent, index) => (
            <div key={'toast-' + index}>
              <span class="fa fa-exclamation-triangle"></span> {toastContent}
            </div>
          ))}
        </ToastList>
      </PerfectScrollbar>
      {toastList.length > 5 && !showAll && (
        <ViewMore onClick={() => setShowAll(true)}>View More....</ViewMore>
      )}
    </ToastContainer>
  );
};
const mapStateToProps = state => {
  return {
    toastList: state.toast.toastList,
  };
};
const mapDispatchToProps = {
  showToast,
  closeToast,
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CustomToast);