Was ist an diesem bedingten Rendering-Ausdruck von React falsch?

Question

Ich habe das folgende Reactjs-Snippet in meiner Benutzeroberfläche, das jetzt einwandfrei funktioniert.

<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>

Ich möchte nicht, dass das Feld contact.phone angezeigt wird, wenn es eine leere Zeichenfolge ist.

Ich versuche, bedingtes Rendering so zu implementieren:

<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>

Aber es liegt im contact 上给出“算术运算的右侧必须是“any”、“number”、“bigint”或枚举类型类型。”错误.phone-Feld. Ich habe auch den folgenden Codeausschnitt ausprobiert (wie oben, aber ohne die geschweiften Klammern), aber er gibt die gesamte JS-Zeile als String auf der Benutzeroberfläche aus.

<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>

Answer 1

条件渲染块中 MenuItem 的语法看起来不正确。您可能想将其更改为以下内容：

<MenuItem key={contact.contactId} value={contact.contactId}>
  {contact.contactId != 'other' 
    ? `${contact.name} - ${contact.phone}`
    : contact.name}
</MenuItem>

这是因为大括号内的任何内容都会被解释为 JS 表达式，因此您的条件渲染版本相当于 "John" - "" 或 "John" - “555-555-5555”。将要呈现的字符串包装在模板字符串中可以避免尝试将其计算为表达式。