reactjs 如何更改物料界面预警组件的类型？

qc6wkl3g 于 2023-01-30 发布在 React

关注(0)|答案(3)|浏览(135)

我对Typescript比较陌生，我已经使用React Context创建了一个snackbar组件，当我尝试设置警报严重性时，我收到以下错误“Type 'string' is not assignable to type 'Color|undefined'"。我确实将类型设置为字符串，但是，我似乎不知道如何将其类型设置为Color。下面是我的警报组件：

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;

以下是我的警报 prop 类型：

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

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

reactjs

来源：https://stackoverflow.com/questions/67512566/how-can-i-alter-the-types-for-material-ui-alert-component

3条答案

按热度按时间

tyky79it1#

根据文档material-ui.com/api/alert，Material-ui预警的严重性可以是四种类型'error' | 'info' | 'success' | 'warning'之一。您遇到的问题是因为alertContext.snackbarType为Alert组件的严重性属性分配了一个undefined值。为了避免出错时出错，最好按如下方式设置默认严重性类型：

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

赞(0）回复(0）举报 2023-01-30

wgeznvg72#

我刚刚遇到了同样的问题，并通过从@material-ui/lab/Alert导入类型解决了它：

import React from 'react';
import Alert from '@material-ui/lab/Alert';
import type { Color } from '@material-ui/lab/Alert'

interface Props{
    severity: Color,
    message: string
}

export const BuildReportAlert = (props: Props) => {

    const {severity, message} = props;

    return (
        <Alert
            variant='outlined'
            severity={severity}
        >
            {message}
        </Alert>
    )

}

赞(0）回复(0）举报 2023-01-30

zaq34kh63#

您可以使用React的useState并创建一个对象来存储严重性和消息。

const [errorDetail, setErrorDetail] = useState({
    severity: "error",
    message: "This is an info alert — check it out!",
  });

而Mui分量在下面。

<Alert severity={errorDetail.severity}>{errorDetail.message}</Alert>

它工作时没有任何问题，您可以随时修改严重性和消息。

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 如何更改物料界面预警组件的类型？

3条答案

相关问题

热门标签

最新问答