我的 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>
條件渲染區塊中
MenuItem
的語法看起來不正確。您可能想將其更改為以下內容:這是因為大括號內的任何內容都會被解釋為JS 表達式,因此您的條件渲染版本相當於
"John" - ""
或"John" - “555 -555-5555」。將要呈現的字串包裝在模板字串中可以避免嘗試將其計算為表達式。