reactjs - předat vykřičník jako hodnotu props v React komponentě

Dnes jsem viděl tento řádek kódu, jsem zmatený, co dělá, vím, že list je pole objektů, ale k čemu je ten !? Jak to ovlivní to, jak budu později pracovat s komponentou MyComponent?

<MyComponent list={data?.list!} />

Odpověď č. 1

To kombinace:

• Volitelný řetězcový operátor (?., TypeScript a JavaScript), a

• Operátor tvrzení o nenulové hodnotě (TypeScript) (ve skutečnosti je to operátor nenulového typu), který říká TypeScriptu, že výsledná hodnota není ani null, ani undefined.

Část data?.list získá hodnotu data.list, pokud data není null nebo undefined, nebo získá undefined, pokud data je null nebo undefined. Poté ! potvrdí TypeScriptu, že výsledek data?.list není null ani undefined (více níže).

Všimněte si, že tento kód je nanejvýš mírně zmatený. Nedává smysl používat volitelný řetězec a ne-nullish tvrzení, protože jediným důvodem pro použití volitelného řetězce je zpracovat situaci, kdy základ (data) může být null nebo undefined a použít hodnotu undefined (místo vyhledávání .list), pokud tomu tak je. Pokračovat v tvrzení, že není nullish, nedává smysl. Jeden či druhý z těchto prvků zde neměl být.

Hádat bych, že ! je tam, protože MyComponent nepovoluje, aby jeho vlastnost list byla null nebo undefined. Pokud ano, kód by měl být jen:

<MyComponent list={data.list} />

...s vhodnou logikou předem, aby se zkontrolovalo, že jak data, tak data.list nejsou null nebo undefined, nebo se zcela vyhnout vykreslení MyComponent, pokud to tak není. Například možná:

{data?.list ? <MyComponent list={data.list} /> : null}