这个React条件渲染表达式有什么问题？

huangapple
go评论79阅读模式
英文:

What is wrong with this React conditional rendering expression?

问题

我不想在contact.phone字段为空字符串时显示它。

我尝试了以下条件渲染的方式：

  1. <Select
  2.     label="Send To"
  3.     labelId="send-to-label"
  4.     required
  5.     error={state.submitted && !state.sendTo}
  6.     fullWidth
  7.     placeholder="Select contact"
  8.     id="send-to"
  9.     value={state.sendTo ? state.sendTo.contactId : ''}
  10.     onChange={selectSendToChanged}
  11.     MenuProps={{ classes: { paper: 'contactMenuList' } }}
  12. >
  13.     {state.sendToContacts.map((contact: Contact) => (
  14.         <MenuItem key={contact.contactId} value={contact.contactId}>
  15.             {contact.contactId !== 'other' 
  16.                 ? `${contact.name} - ${contact.phone}`
  17.                 : contact.name
  18.             }
  19.         </MenuItem>
  20.     ))}
  21. </Select>

但它在contact.phone字段上给出了"The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type."错误。我还尝试了下面的代码（与上面相同，但没有花括号），但它将整个JS行转储为UI上的字符串。

  1. <Select
  2.     label="Send To"
  3.     labelId="send-to-label"
  4.     required
  5.     error={state.submitted && !state.sendTo}
  6.     fullWidth
  7.     placeholder="Select contact"
  8.     id="send-to"
  9.     value={state.sendTo ? state.sendTo.contactId : ''}
  10.     onChange={selectSendToChanged}
  11.     MenuProps={{ classes: { paper: 'contactMenuList' } }}
  12. >
  13.     {state.sendToContacts.map((contact: Contact) => (
  14.         <MenuItem key={contact.contactId} value={contact.contactId}>
  15.             {contact.contactId !== 'other' 
  16.                 ? `${contact.name} - ${contact.phone}`
  17.                 : contact.name
  18.             }
  19.         </MenuItem>
  20.     ))}
  21. </Select>

（请注意，我已经将您的代码示例中的&lt;和&gt;转换为了正常的HTML标签，以便更容易阅读。）

英文:

I had the below Reactjs snippet in our UI, which works fine now.

  1. &lt;Select
  2.                     label=&quot;Send To&quot;
  3.                     labelId=&quot;send-to-label&quot;
  4.                     required
  5.                     error={state.submitted &amp;&amp; !state.sendTo}
  6.                     fullWidth
  7.                     placeholder=&quot;Select contact&quot;
  8.                     id=&quot;send-to&quot;
  9.                     value={state.sendTo ? state.sendTo.contactId : &#39;&#39;}
  10.                     onChange={selectSendToChanged}
  11.                     MenuProps={{ classes: { paper: &#39;contactMenuList&#39; } }}
  12.                 &gt;
  13.                     {state.sendToContacts.map((contact: Contact) =&gt; (
  14.                         &lt;MenuItem key={contact.contactId} value={contact.contactId}&gt;
  15.                             {contact.name} - {contact.phone}
  16.                         &lt;/MenuItem&gt;
  17.                     ))}
  18.                 &lt;/Select&gt;

I don't want the contact.phone field to be shown when it is an empty string.

I tried implementing condition rendering like this:

  1. &lt;Select
  2.                     label=&quot;Send To&quot;
  3.                     labelId=&quot;send-to-label&quot;
  4.                     required
  5.                     error={state.submitted &amp;&amp; !state.sendTo}
  6.                     fullWidth
  7.                     placeholder=&quot;Select contact&quot;
  8.                     id=&quot;send-to&quot;
  9.                     value={state.sendTo ? state.sendTo.contactId : &#39;&#39;}
  10.                     onChange={selectSendToChanged}
  11.                     MenuProps={{ classes: { paper: &#39;contactMenuList&#39; } }}
  12.                 &gt;
  13.                     {state.sendToContacts.map((contact: Contact) =&gt; (
  14.                         &lt;MenuItem key={contact.contactId} value={contact.contactId}&gt;
  15.                             {contact.contactId != &#39;other&#39; 
  16. 								? {contact.name} - {contact.phone}
  17. 								: {contact.name}
  18. 							}
  19.                         &lt;/MenuItem&gt;
  20.                     ))}
  21.                 &lt;/Select&gt;

but it gives "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type." error on contact.phone field. I also tried the below snippet (the same as above but without curly brackets) but it dumps the entire JS line as a string on the UI.

  1. &lt;Select
  2.                     label=&quot;Send To&quot;
  3.                     labelId=&quot;send-to-label&quot;
  4.                     required
  5.                     error={state.submitted &amp;&amp; !state.sendTo}
  6.                     fullWidth
  7.                     placeholder=&quot;Select contact&quot;
  8.                     id=&quot;send-to&quot;
  9.                     value={state.sendTo ? state.sendTo.contactId : &#39;&#39;}
  10.                     onChange={selectSendToChanged}
  11.                     MenuProps={{ classes: { paper: &#39;contactMenuList&#39; } }}
  12.                 &gt;
  13.                     {state.sendToContacts.map((contact: Contact) =&gt; (
  14.                         &lt;MenuItem key={contact.contactId} value={contact.contactId}&gt;
  15.                             contact.contactId != &#39;other&#39; 
  16. 								? {contact.name} - {contact.phone}
  17. 								: {contact.name}
  18.                         &lt;/MenuItem&gt;
  19.                     ))}
  20.                 &lt;/Select&gt;

答案1

得分: 2

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

  1. &lt;MenuItem key={contact.contactId} value={contact.contactId}&gt;
  2.   {contact.contactId != &#39;other&#39; 
  3.     ? `${contact.name} - ${contact.phone}`
  4.     : contact.name}
  5. &lt;/MenuItem&gt;

这是因为花括号内的任何内容都被解释为JS表达式，所以您的条件渲染版本等同于，例如，&quot;John&quot; - &quot;&quot; 或 &quot;John&quot; - &quot;555-555-5555&quot;。将要呈现的字符串包装在模板字符串中可以避免将其尝试评估为表达式。

英文:

The syntax for MenuItem in your conditional rendering block looks incorrect. You might want to change it to the following:

  1. &lt;MenuItem key={contact.contactId} value={contact.contactId}&gt;
  2.   {contact.contactId != &#39;other&#39; 
  3.     ? `${contact.name} - ${contact.phone}`
  4.     : contact.name}
  5. &lt;/MenuItem&gt;

This is because anything inside curly braces is interpreted as a JS expression, so your conditional rendering version was equivalent to, for example, &quot;John&quot; - &quot;&quot; or &quot;John&quot; - &quot;555-555-5555&quot;. Wrapping the string to be rendered in a template string avoids trying to evaluate this as an expression.

huangapple
  • 本文由 发表于 2023年6月19日 10:01:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76503214.html
  • conditional-rendering
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定