我如何禁用或删除警报组件

Question

如何禁用警报，我在文档中没有找到为此的布尔参数。

\n

import React from \'react\';\nimport Alert from \'@material-ui/lab/Alert\';\n\nexport default function SimpleAlerts() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      <Alert severity="error">This is an error alert \xe2\x80\x94 check it out!</Alert>\n    </div>\n  );\n}\n

\n

Answer 1

使用条件渲染：

\n

import React from 'react';\nimport Alert from '@material-ui/lab/Alert';\n\nexport default function SimpleAlerts() {\n  const classes = useStyles();\n\n  return (\n    <div>\n      {someCondition && <Alert severity="error">This is an error alert \xe2\x80\x94 check it out!</Alert>}\n    </div>\n  );\n}\n

\n

Answer 2

您可以将其包装在<Snackbar>( doc )

const [open, setOpen] = React.useState(true)

const handleClick = () => {
  setOpen(!open)
}

return (
  <>
    <Button variant="outlined" onClick={handleClick}>
      Toggle
    </Button>
    <Snackbar open={open}>
      <Alert severity="success">This is a success message!</Alert>
    </Snackbar>
  </>
)

Codesanbox 演示