英文:
How to resolve Warning: known event handler property `onExited`. It will be ignored in StatusSnackbar component
问题
以下是代码部分的中文翻译：
在 StatusSnackbar 组件中出现警告：已知的事件处理程序属性 `onExited`，如何解决此问题。
**组件：**
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}
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)
希望这能帮助您理解代码部分的内容。如果您需要进一步的帮助，请随时告诉我。
英文:
In StatusSnackbar component getting Warning: known event handler property onExited, how to resolve the same.
Component:
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}
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)
答案1
得分: 0
I have replaced onExited with onClose in the following way, and it is working as I expected, without any warning.
Component:
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={removeNotification}
onClick={handleClose}
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)
(Note: I've translated the code comments only and not the code itself.)
英文:
I have replaced onExited by onClose in following way and it working as I expected way without any warning.
Component:
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={removeNotification}
onClick={handleClose}
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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论