這個 React 條件渲染表達式有什麼問題？

Question

我的 UI 中有以下 Reactjs 片段，現在可以正常運作。

<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>

我不希望在 contact.phone 欄位為空字串時顯示該欄位。

我嘗試像這樣實作條件渲染：

<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>

但它在contact 上給出「算術運算的右側必須是「any」、「number」、「bigint」或枚舉類型類型。」錯誤.phone 欄位。我還嘗試了下面的程式碼片段（與上面相同，但沒有大括號），但它將整個 JS 行轉儲為 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

條件渲染區塊中 MenuItem 的語法看起來不正確。您可能想將其更改為以下內容：

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

這是因為大括號內的任何內容都會被解釋為JS 表達式，因此您的條件渲染版本相當於"John" - "" 或"John" - “555 -555-5555」。將要呈現的字串包裝在模板字串中可以避免嘗試將其計算為表達式。