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”。将要呈现的字符串包装在模板字符串中可以避免尝试将其计算为表达式。