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

发布于 2025-01-17 01:20:31 字数 420 浏览 2 评论 0原文

我是 Material UI（Web）的新手，但我已经使用过 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])```

原文

I am new to material UI (web), but I have used and. I need to show something like message.error(antd popup) which I can do without putting it in the render part and call it as a simple function... How do I do the same in Material UI?

Edit:

I tried using component, but we have to maintain a state for the message to be displayed & render the Alert everytime the message changes... I need a way to call Alert as a function (e.g. alert.error({message: ''}) or any other component in MUI which can do it)

In antd we can do

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

霓裳挽歌倾城醉 2025-01-24 01:20:31

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

回复收藏 0 原文

夏花。依旧 2025-01-24 01:20:31

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

Demo.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>
    </>
  );
};

屏幕截图所示：

You can use state to show/hide the alert as shown in the following example

Demo.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>
    </>
  );
};

Screenshot:

回复收藏 0 原文

~没有更多了~