Интерфейс материала Снэкбар autoHideDuration как ноль

Question

Я пытаюсь реализовать динамическую снэк-панель пользовательского интерфейса для материала, которая может иметь определенное время для автоматического скрытия или нет. Эта информация появится как 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

const SnackbarComponent = (props: SnackbarProps) => {
  const snackbarProps = {
     open: true,
     onClose: handleClose,
     // this condition solves your problem
     ...(props.autoHideDuration && { props.autoHideDuration })
     // or with default value
     // ...(!props.stayOpen && { autoHideDuration: 4000 })
  }

  return <Snackbar {...snakbarProps} />;
};