如何解决StatusSnackbar组件中onExited事件处理属性警告？

问题原因 #

你在Snackbar组件上直接设置onExited属性会被忽略，是因为Material-UI的Snackbar本身并不提供顶层的onExited props——这个事件回调属于Snackbar内部使用的过渡组件（比如Fade），必须通过指定方式传递给内部组件。

解决方法 #

将onExited通过TransitionProps属性传递给Snackbar的内部过渡组件，具体修改如下：

把原代码中Snackbar的onExited={removeNotification}替换为TransitionProps={{ onExited: removeNotification }}。

完整修改后的组件代码 #

import Snackbar from '@material-ui/core/Snackbar'
import { withStyles } from '@material-ui/core/styles'
import PropTypes from 'prop-types'
import React, { useCallback, useState } from 'react'
import NotificationType from '../../../../types/notification'
import styles from './styles'


const Component = ({
    classes,
    notification,
    onRemove: removeNotification
}) => {

    const [ open, setOpen ] = useState(true)

    const handleClose = useCallback((e, reason) => {
        if (reason !== 'clickaway') {
            setOpen(false)
        }
    }, [])

    return (
        <Snackbar
            className={classes.root}
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            autoHideDuration={notification.duration}
            open={open}
            onClose={handleClose}
            TransitionProps={{ onExited: removeNotification }}
            message={notification.message}
            variant={notification.variant}
        />
    )
}

Component.displayName = 'Notifications.Notification'
Component.propTypes = {
    classes: PropTypes.shape({
        root: PropTypes.string.isRequired
    }).isRequired,
    notification: NotificationType.isRequired,
    onRemove: PropTypes.func.isRequired
}

export default withStyles(styles)(Component)

原理说明 #

Material-UI的Snackbar组件将所有过渡相关的props统一放在TransitionProps中传递给内部过渡组件，这样既避免了顶层props冲突，也能确保过渡组件正确接收并触发onExited回调。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A