英文:
What is wrong with this React conditional rendering expression?
问题
我不想在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字段上给出了"The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type."错误。我还尝试了下面的代码（与上面相同，但没有花括号），但它将整个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>
（请注意，我已经将您的代码示例中的<和>转换为了正常的HTML标签，以便更容易阅读。）
英文:
I had the below Reactjs snippet in our UI, which works fine now.
<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>
I don't want the contact.phone field to be shown when it is an empty string.
I tried implementing condition rendering like this:
<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>
but it gives "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type." error on contact.phone field. I also tried the below snippet (the same as above but without curly brackets) but it dumps the entire JS line as a string on the 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
得分: 2
MenuItem 在您的条件渲染块中的语法看起来不正确。您可能希望将其更改为以下内容：
<MenuItem key={contact.contactId} value={contact.contactId}>
{contact.contactId != 'other'
? `${contact.name} - ${contact.phone}`
: contact.name}
</MenuItem>
这是因为花括号内的任何内容都被解释为JS表达式，所以您的条件渲染版本等同于，例如，"John" - "" 或 "John" - "555-555-5555"。将要呈现的字符串包装在模板字符串中可以避免将其尝试评估为表达式。
英文:
The syntax for MenuItem in your conditional rendering block looks incorrect. You might want to change it to the following:
<MenuItem key={contact.contactId} value={contact.contactId}>
{contact.contactId != 'other'
? `${contact.name} - ${contact.phone}`
: contact.name}
</MenuItem>
This is because anything inside curly braces is interpreted as a JS expression, so your conditional rendering version was equivalent to, for example, "John" - "" or "John" - "555-555-5555". Wrapping the string to be rendered in a template string avoids trying to evaluate this as an expression.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论