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

Question

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

function DataList({label, onSelect, options, swap}) {

    return (
        <DataListContainer>
            <CustomInput placeholder={label} list="items" name="item" id="item" required onChange={onSelect}></CustomInput>
            <datalist id='items' >
                {options? options.map(option => <option key={option.number} value={swap ? option.title : option.number}>{swap ? option.number : option.title}</option>) : null}
            </datalist>
        </DataListContainer>
    );
}

这是实际呈现我的组件的代码。

<DataList 
  label='Select Chapter Number' 
  onSelect={changeChapterNumber} 
  options={chaptersFromSelectedComic}
/>
<DataList 
  label='Select Chapter Title' 
  onSelect={changeChapter} 
  options={chaptersFromSelectedComic} 
  swap={true}
 />

Answer 1

问题

您已将列表名称 (list="items") 包含在组件中，因此所有 datalist 选项都引用了相同的初始定义选项。

解决方案

将list 属性公开为prop，这样每个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>
  );
}

将list 属性传递给每个DataList 组件。

<DataList list="itemsA" label="List A" options={options} />
<DataList list="itemsB" label="List B" options={options} swap />