이 React 조건부 렌더링 표현에 어떤 문제가 있나요?

Question

내 UI에는 현재 잘 작동하는 다음 Reactjs 조각이 있습니다.

으아악

빈 문자열인 경우 contact.phone 필드가 표시되는 것을 원하지 않습니다.

저는 다음과 같이 조건부 렌더링을 구현하려고 합니다.

으아악

하지만 그것은 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.name} - {contact.phone}
                        </MenuItem>
                    ))}
                </Select>

Answer 1

조건부 렌더링 블록의 MenuItem 구문이 잘못된 것 같습니다. 다음과 같이 변경할 수 있습니다:

으아악

중괄호 안의 내용은 JS 표현식으로 해석되므로 조건부로 렌더링된 버전은 "John" - "" 또는 "John" - "555-555-5555"와 동일합니다. 렌더링할 문자열을 템플릿 문자열로 래핑하면 이를 표현식으로 평가하지 않아도 됩니다.