Question

我正在尝试实现一个动态的Material UI Snackbar，它可以有特定的时间“自动隐藏”或没有。当我调用自定义组件时，此信息将以props的形式出现。

关于autoHideDuration属性，文档显示：

自动调用onClose函数之前要等待的毫秒数。 onClose然后应设置打开道具的状态以隐藏小吃栏。默认情况下，使用null值禁用此行为。

我知道，如果省略此参数，我的Snackbar将不自动隐藏。但是，如果我尝试使用null值指定此参数，则会出现类型错误：

类型null无法分配给类型number

这是我拥有的代码的相关部分：

const SnackbarComponent = (props: SnackbarProps) => {
  const autoHideValue = props.stayOpen ? null : 4000;

  return (
    <Snackbar
        open={ture}
        autoHideDuration={autoHideValue} // Type Error on this line
        onClose={handleClose}
    />
  );
};

我这样称呼它：

<SnackbarComponent stayOpen={true} />

我能想到的唯一解决方案是有条件的回报。但这似乎不是最好的方法：

const SnackbarComponent = (props: SnackbarProps) => {
  if(props.stayOpen){
    return (
      <Snackbar
        open={ture}
        onClose={handleClose}
      />
    );
  } else {
    return (
      <Snackbar
        open={ture}
        autoHideDuration={4000}
        onClose={handleClose}
      />
    );
  }
};

关于如何实现这一点的任何想法？

Answer 1

decltype([]{})

材质UI Snackbar autoHideDuration为null

1 个答案: