我的 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>
P粉1992488082023-09-12 13:41:55
条件渲染块中 MenuItem
的语法看起来不正确。您可能想将其更改为以下内容:
<MenuItem key={contact.contactId} value={contact.contactId}> {contact.contactId != 'other' ? `${contact.name} - ${contact.phone}` : contact.name} </MenuItem>
这是因为大括号内的任何内容都会被解释为 JS 表达式,因此您的条件渲染版本相当于 "John" - ""
或 "John" - “555-555-5555”。将要呈现的字符串包装在模板字符串中可以避免尝试将其计算为表达式。