reactjs - Πώς να περάσετε υπό συνθήκη ένα true ή false σε boolean props του React με TypeScript;

Χρησιμοποιώ τη βιβλιοθήκη Material UI με React + Typescript.

Όταν προσπαθώ να περάσω μια συνθήκη boolean ως ιδιότητα "button" ενός component, λαμβάνω σφάλμα TypeScript: Ο τύπος 'boolean' δεν μπορεί να ανατεθεί στον τύπο 'true'

Συνημμένος είναι ο σύνδεσμος του codesandbox:

https://codesandbox.io/s/fragrant-worker-2l67x?file=/src/App.tsx

Απάντηση #1

TLD'R

<ListItem
  button={item.isTitle ? undefined : true}
  divider={item.isTitle}
  key={item.text}
>

Η εξήγηση

Για να εμφανίσετε ένα ListItem ως κουμπί, περνάτε την ιδιότητα button. Αν δεν θέλετε να είναι κουμπί, μπορείτε να περάσετε false, αλλά αυτό έρχεται σε σύγκρουση με τον τύπο true.

Η άλλη επιλογή για να μην εμφανίζεται ως κουμπί είναι να μην προσθέσετε καθόλου την ιδιότητα button. Αλλά πώς αυτό βοηθά, ρωτάτε; Πρέπει να ορίσω αυτή την ιδιότητα για στοιχεία "που δεν είναι τίτλος".

Το να μην περνάς ένα prop είναι σαν να περνάς undefined. Εφόσον το button είναι προαιρετικό, μπορείς να το περάσεις ως undefined αντί για false.

https://codesandbox.io/s/so-67523398-lhgud?file=/src/App.tsx:1874-1914