Apakah yang salah dengan ungkapan pemaparan bersyarat React ini?

Question

Saya mempunyai coretan Reactjs berikut dalam UI saya yang berfungsi dengan baik sekarang.

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            {contact.name} - {contact.phone}
                        </MenuItem>
                    ))}
                </Select>

Saya tidak mahu medan contact.phone dipaparkan apabila ia adalah rentetan kosong.

Saya cuba melaksanakan pemaparan bersyarat seperti ini:

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            {contact.contactId != 'other' 
                                ? {contact.name} - {contact.phone}
                                : {contact.name}
                            }
                        </MenuItem>
                    ))}
                </Select>

Tetapi ia dalam bidang contact 上给出“算术运算的右侧必须是“any”、“number”、“bigint”或枚举类型类型。”错误.phone. Saya juga mencuba coretan kod berikut (sama seperti di atas tetapi tanpa pendakap kerinting), tetapi ia membuang keseluruhan baris JS sebagai rentetan pada UI.

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            contact.contactId != 'other' 
                                ? {contact.name} - {contact.phone}
                                : {contact.name}
                        </MenuItem>
                    ))}
                </Select>

Answer 1

Sintaks MenuItem dalam blok pemaparan bersyarat kelihatan tidak betul. Anda mungkin mahu menukarnya kepada yang berikut:

<MenuItem key={contact.contactId} value={contact.contactId}>
  {contact.contactId != 'other' 
    ? `${contact.name} - ${contact.phone}`
    : contact.name}
</MenuItem>

Ini kerana apa-apa sahaja di dalam kurungan kerinting akan ditafsirkan sebagai ungkapan JS, jadi versi bersyarat anda adalah bersamaan dengan "John" - "" atau "John" - "555-555-5555". Membungkus rentetan yang hendak diberikan dalam rentetan templat mengelak daripada cuba menilainya sebagai ungkapan.