在选择菜单中显示1或其他2个选项

Question

我有这个:

<select
onInput={(e) => onTyping(e.target.name, e.target.value)}
name="site"
id="site"
onChange={handleInputChange}
>
<option value={myData.site}>{myData.site}</option>
<option value="MAR">MARKHAM</option>
<option value="OTT">OTTAWA</option>
</select>

基本上它所做的只是显示位置的选项，加上已经被选中的那个。我需要做的是，如果myData.site == mar显示渥太华，马卡姆作为选中的选项，反之亦然。我试图做一个脚本内的反应return，但它不喜欢它。我该怎么做呢?

Answer 1

可以在大括号内使用三元运算符或逻辑运算符有条件地呈现元素

<option value={myData.site}>{myData.site}</option>
{myData.site == 'mar' && <option value="MAR">MARKHAM</option>}
{myData.site == 'ott' && <option value="OTT">OTTAWA</option>}