84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我的 UI 中有以下 Reactjs 片段，現在可以正常運作。
{state.sendToContacts.map((contact: Contact) => ( {contact.name} - {contact.phone} ))}
我不希望在contact.phone欄位為空字串時顯示該欄位。
contact.phone
我嘗試像這樣實作條件渲染：
{state.sendToContacts.map((contact: Contact) => ( {contact.contactId != 'other' ? {contact.name} - {contact.phone} : {contact.name} } ))}
但它在contact 上給出「算術運算的右側必須是「any」、「number」、「bigint」或枚舉類型類型。」錯誤.phone欄位。我還嘗試了下面的程式碼片段（與上面相同，但沒有大括號），但它將整個 JS 行轉儲為 UI 上的字串。
contact 上給出「算術運算的右側必須是「any」、「number」、「bigint」或枚舉類型類型。」錯誤.phone
{state.sendToContacts.map((contact: Contact) => ( contact.contactId != 'other' ? {contact.name} - {contact.phone} : {contact.name} ))}
條件渲染區塊中MenuItem的語法看起來不正確。您可能想將其更改為以下內容：
MenuItem
{contact.contactId != 'other' ? `${contact.name} - ${contact.phone}` : contact.name}
這是因為大括號內的任何內容都會被解釋為JS 表達式，因此您的條件渲染版本相當於"John" - ""或"John" - “555 -555-5555」。將要呈現的字串包裝在模板字串中可以避免嘗試將其計算為表達式。
"John" - ""
"John" - “555 -555-5555」。將要呈現的字串包裝在模板字串中可以避免嘗試將其計算為表達式。
條件渲染區塊中
MenuItem的語法看起來不正確。您可能想將其更改為以下內容：這是因為大括號內的任何內容都會被解釋為JS 表達式，因此您的條件渲染版本相當於
"John" - ""或"John" - “555 -555-5555」。將要呈現的字串包裝在模板字串中可以避免嘗試將其計算為表達式。