Quel est le problème avec cette expression de rendu conditionnel React ?

Question

J'ai l'extrait Reactjs suivant dans mon interface utilisateur qui fonctionne correctement maintenant.

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

Je ne veux pas que le champ contact.phone soit affiché lorsqu'il s'agit d'une chaîne vide.

J'essaie d'implémenter le rendu conditionnel comme ceci :

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

Mais c’est dans le domaine contact 上给出“算术运算的右侧必须是“any”、“number”、“bigint”或枚举类型类型。”错误.phone. J'ai également essayé l'extrait de code suivant (identique à celui ci-dessus mais sans les accolades), mais il affiche toute la ligne JS sous forme de chaîne sur l'interface utilisateur.

<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

La syntaxe de MenuItem dans le bloc de rendu conditionnel semble incorrecte. Vous souhaiterez peut-être le modifier comme suit : 

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

En effet, tout ce qui se trouve entre les accolades sera interprété comme une expression JS, donc votre version rendue conditionnellement est équivalente à "John" - "" ou "John" - "555-555-5555". Envelopper la chaîne à restituer dans une chaîne de modèle évite d'essayer de l'évaluer en tant qu'expression.