Material UI 中 message.error() [antd] 的替代组件是什么？答案

【问题标题】：What is the alternative component of message.error() [antd] in material UI?Material UI 中 message.error() [antd] 的替代组件是什么？
【发布时间】：2022-09-28 04:18:29
【问题描述】：

我是材料 UI（网络）的新手，但我使用过 and。我需要显示诸如 message.error(antd popup) 之类的内容，而无需将其放入渲染部分并将其作为简单函数调用...如何在 Material UI 中执行相同操作？

编辑：

我尝试使用组件，但我们必须保持消息显示的状态并在每次消息更改时呈现警报...我需要一种将警报作为函数调用的方法（例如 alert.error({message: \' \'}) 或 MUI 中可以执行此操作的任何其他组件）

在 antd 中我们可以做到

// THIS IS TO DISPLAY A POPUP like window. Alert in antd
message.error({message: err||\"No network \"}) 
},[err])```

请添加您迄今为止尝试过的代码。
请提供足够的代码，以便其他人更好地理解或重现问题。
@IngoSteinke 添加了一个编辑
@KaushikManoharan 检查此mui.com/components/alert
@Ved，但我们不能将 Alert 组件作为函数调用...我们只能将其用作组件...我想通过 message.error() 之类的函数调用触发弹出窗口

标签： reactjs material-ui antd

【解决方案1】：

您可以使用 state 来显示/隐藏警报，如下例所示

演示.js

const Demo = () => {
  const [showmessage, setShowmessage] = useState(false);
  const [alertmessage, setAlertmessage] = useState('Alert message');

  const onClick = () => {
    setShowmessage(!showmessage);
    setAlertmessage('This is alert message');
  };

  return (
    <>
      {showmessage && (
        <Alert variant="filled" severity="error">
          {alertmessage}
        </Alert>
      )}
      <Button style={{ margin: '50px' }} type="primary" onClick={onClick}>
        Show/hide alert
      </Button>
    </>
  );
};

截屏：

【讨论】：

【解决方案2】：

您可能想使用notistack。它遵循材料设计，非常易于使用。

【讨论】：