Ошибка TS - создание настраиваемого компонента предупреждения React - PullRequest
Новая
       16

Ошибка TS - создание настраиваемого компонента предупреждения React

0 голосов
/ 16 марта 2020

Я пытаюсь создать пользовательский компонент оповещения о реагирующих материалах, который я могу вызывать на разных страницах, просто передавая текст и серьезность в качестве параметров. Я пытаюсь использовать это: 

export default function CustomAlert(severity: string, text: string){
    <Alert style={{width:'50%'}} severity={severity}> {text}</Alert>
}

, но я получаю сообщение об ошибке первого слова серьезности severity={severity}, что: 

Type 'string' is not assignable to type '"error" | "success" | "info" | "warning" | undefined'.ts(2322)
Alert.d.ts(25, 3): The expected type comes from property 'severity' which is declared here on type 'IntrinsicAttributes & AlertProps'

Как я могу это исправить? Или есть альтернативный метод для настройки этого компонента?

Редактировать: я все еще не могу использовать его на другой моей странице: 

  function StatusMessage(){
    if (isRemoved){
      return (
      <Alert style={{width:'25%'}} severity="success"> User Removed</Alert>
        )
      }
      else{
        if(errorMessage!=''){
        if (errorMessage.includes(`Couldn't find user`)){
          return (
            <div>
            {/* <Alert style={{width:'25%'}} severity="error"> Couldn't Find User</Alert> */}
            <CustomAlert></CustomAlert>
            </div>
              )
        }       
      }}
  }

Я получаю ошибки в CustomAlert, которые: 

JSX element type 'void' is not a constructor function for JSX elements.ts(2605)
Type '{}' is not assignable to type '(IntrinsicAttributes & "success") | (IntrinsicAttributes & "info") | (IntrinsicAttributes & "warning") | (IntrinsicAttributes & "error")'.
  Type '{}' is not assignable to type '"error"'.ts(2322)

1 Ответ

0 голосов
/ 16 марта 2020

Alert может принимать только конечное число строк или не определено, поэтому вы должны явно указать, что ваша строка пропусков относится к этому типу. 

type Severity = "error" | "success" | "info" | "warning" | undefined;

export default function CustomAlert(severity: Severity, text = "Sorry"){
    <Alert style={{width:'50%'}} severity={severity}> {text}</Alert>
}

Теперь компилятор TS знает для тот факт, что severity будет одним из типов объединения Severity, и не должен выдавать ошибку.

...