我在我们的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.phone字段上给出了“* 算术运算的右边必须是类型'any'，'number'，'bigint'或枚举类型。*”错误。我也尝试了下面的代码片段（和上面一样，但没有大括号），但它将整个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>
1条答案
按热度按时间nbnkbykc1#
条件渲染块中
MenuItem的语法看起来不正确。您可能希望将其更改为以下内容：这是因为花括号内的任何内容都被解释为JS表达式，因此您的条件渲染版本相当于
"John" - ""或"John" - "555-555-5555"。在模板字符串中 Package 要呈现的字符串可以避免尝试将其作为表达式计算。