Javascript 三值运算符用于设置React组件中datalist选项的值时失败

我的代码是用React编写的，我试图有条件地交换每个元素中分配给值的内容。swap是作为一个道具传入的，我认为它可以充当触发器，但是当我使用swap=true vs swap=null时，我没有得到任何改变

函数数据列表（{label，onSelect，options，swap}）{
返回(
{options？options.map（option=>{swap？option.number:option.title}）：null}
);
}

问题 您已将列表名称（

list=“items”

）包含在组件中，因此所有数据列表选项都引用相同的初始定义选项

解决方案 将

list

属性作为道具公开，以便每个

DataList

组件可以指定自己的选项集

function DataList({
  label,
  list, // <-- add list prop
  onSelect,
  options,
  swap
}) {
  return (
    <DataListContainer>
      <CustomInput
        placeholder={label}
        list={list} // <-- set list attribute for input
        name="item"
        id="item"
        required
        onChange={onSelect}
      ></CustomInput>
      <datalist id={list}> // <-- set id for datalist options
        {options
          ? options.map((option) => (
              <option
                key={option.number}
                value={swap ? option.title : option.number}
              >
                {swap ? option.number : option.title}
              </option>
            ))
          : null}
      </datalist>
    </DataListContainer>
  );
}

---

{swap？option.number:option.title}这两个选项应该不同还是应该匹配？我看到该值与

选项中的文本相同，也做了上述注释。@KetanRamteke奇怪的是，文档中的
选项没有一个是关闭的，所以我不知道这是否是打字错误或实际上是正确的，但它在JSX中肯定无效。在沙箱里试过。根据InReact，选项标签已经关闭。太棒了，我完全疏忽了，但谢谢你，如果没有你，我是不会明白的！
<DataList list="itemsA" label="List A" options={options} />
<DataList list="itemsB" label="List B" options={options} swap />