react 提示消息队列 （支持动态添加，删除，多实例化）

import React from 'react'
import PropTypes from 'prop-types'

import AnimationOperateFeedbackInfo from '../AnimationOperateFeedbackInfo'
import OperateFeedbackInfo from '../OperateFeedbackInfo'

import './index.less'

const OPERATE_ARRAY_MAX_LENGTH = 5

export default function AssistantOperateFeedbackArea({
  processingOperateList, failedOperateList, onClickCleanFailedOperateBtn, animationEndCallback,
}) {
  const operateWrapStyle = {
    width: '200px',
    height: '28px',
    color: '#fff',
  }

  return (
    

      {
        processingOperateList.length > 0 && (
          <div
            className="operate-feedback-area"
            style={{
              // queueMaxLength + 1 省略区域高度
              height: `${processingOperateList.length > OPERATE_ARRAY_MAX_LENGTH ? (OPERATE_ARRAY_MAX_LENGTH + 1) * 28 : processingOperateList.length * 28}px`,
            }}
          >
            {
              processingOperateList.slice(0, OPERATE_ARRAY_MAX_LENGTH).map((item) => {
                return (
                  <AnimationOperateFeedbackInfo
                    operateId={item.operateId}
                    operate={item.operate}
                    operateType={item.state}
                    animationEndCallback={animationEndCallback}
                    style={operateWrapStyle}
                    key={item.operateId}
                  />
                )
              })
            }
            {
              processingOperateList.length > OPERATE_ARRAY_MAX_LENGTH && (
                <div
                  style={operateWrapStyle}
                  className="ellipsis-operate-info"
                >
                  ... ...
                
              )
            }
          

) } { failedOperateList.length > 0 && ( <div className="operate-feedback-area" style={{ // queueMaxLength + 1 省略区域高度 height: `${failedOperateList.length > OPERATE_ARRAY_MAX_LENGTH ? (OPERATE_ARRAY_MAX_LENGTH + 1) * 28 : failedOperateList.length * 28}px`, }} > { failedOperateList.slice(0, OPERATE_ARRAY_MAX_LENGTH).map((item) => { return (

<OperateFeedbackInfo operate={item.operate} style={operateWrapStyle} iconRotate={false} iconPath={require('~/shared/assets/image/red-white-warn-icon-60-60.png')} />

) }) } <div className="clean-failed-feedback-info-btn" onClick={onClickCleanFailedOperateBtn} tabIndex={0} role="button" > 清除所有异常

{ failedOperateList.length > OPERATE_ARRAY_MAX_LENGTH && ( <div style={operateWrapStyle} className="ellipsis-operate-info" > ... ...

) }

) } { processingOperateList.length === 0 && failedOperateList.length === 0 && (

暂无对教师端操作

) }

) } AssistantOperateFeedbackArea.propTypes = { processingOperateList: PropTypes.array, failedOperateList: PropTypes.array, onClickCleanFailedOperateBtn: PropTypes.func, animationEndCallback: PropTypes.func, } AssistantOperateFeedbackArea.defaultProps = { processingOperateList: [], failedOperateList: [], animationEndCallback: () => {}, onClickCleanFailedOperateBtn: () => {}, }

import React, { useRef, useLayoutEffect } from 'react'
import PropTypes from 'prop-types'
import CX from 'classnames'

import './index.less'

export default function OperateFeedbackInfo({
  operate, iconPath, style, iconRotate, resetAnimation,
}) {
  const imgRef = useRef(null)

  useLayoutEffect(() => {
    if (resetAnimation === true) {
      const imgElem = imgRef.current
      imgElem.className = ''

      // 触发一次重绘 同步所有旋转的icon动画
      imgElem.height = imgElem.offsetHeight

      imgElem.className = 'operate-icon-rotate'
    }
  })

  return (
    <div
      className="operate-feedback-Info"
      style={style}
    >
      
{operate}
      

        <img
          className={CX({
            'operate-icon-rotate': iconRotate,
          })}
          src={iconPath}
          alt=""
          ref={imgRef}
        />
      
    

) } OperateFeedbackInfo.propTypes = { operate: PropTypes.string.isRequired, iconPath: PropTypes.string.isRequired, iconRotate: PropTypes.bool, resetAnimation: PropTypes.bool, style: PropTypes.object, } OperateFeedbackInfo.defaultProps = { style: {}, resetAnimation: false, iconRotate: false, }