时间戳

首页 > 解决方案 > 如何更改材质 UI 警报组件的类型？

javascript - 如何更改材质 UI 警报组件的类型？

问题描述

我对 Typescript 比较陌生，我使用 React Context 创建了一个快餐栏组件，当我尝试设置警报严重性时，我收到此错误“类型‘字符串’不可分配给类型‘颜色|未定义’。” 我确实将类型设置为字符串，但是，我似乎无法弄清楚如何给它一种颜色类型。这是我的警报组件：

const AppAlert = () => {
  const alertContext = useContext(AlertContext);

  return (
    <div>
      <Snackbar open={alertContext.snackbarOpen}>
        <Alert severity={alertContext.snackbarType} variant="filled">
          {alertContext.snackbarMessage}
        </Alert>
      </Snackbar>
    </div>
  );
};

export default AppAlert;

这是我的警报道具类型：

interface AlertProps {
  snackbarOpen: boolean;
  snackbarType: string;
  snackbarMessage: string;
  setAlert: (type: string, message: string) => void;
}

我希望我足够具体，因为我仍在努力理解 TS。

标签： javascriptreactjstypescripttypesmaterial-ui

解决方案

'error' | 'info' | 'success' | 'warning'根据文档material-ui.com/api/alert，Material-ui警报的严重性可以是四种类型之一。您遇到的问题是因为您的Alert组件的严重性属性undefined已从您的alertContext.snackbarType. 为避免出现问题时出现错误，最好设置默认严重性类型，如下所示：

<Alert severity={alertContext?.snackbarType || 'warning'} variant="filled">
    {alertContext?.snackbarMessage}
</Alert>

推荐阅读