javascript - JSX: map 内的条件语句

Question

我试图了解如何在 JSX 中合并条件语句。我有一个对象数组，我将其映射到选择框。我想排除在indicator.name中包含子字符串“threshold”的项目。

所以我不能使用三元运算符，因为没有“或”项。但我不知道如何在此映射中包含 if 语句。无论我尝试什么，我都会收到错误。

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.map(indicator => (
    <option key={indicator.name} value={indicator.name}>
      {indicator.label}
    </option>
  ))}
</select>

Answer 1

您可以过滤然后映射:

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.filter(indicator=>indicator.name.includes('threshold')).map(indicator => (
    <option key={indicator.name} value={indicator.name}>
      {indicator.label}
    </option>
  ))}
</select>

或者返回null:

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.map(indicator => (
    indicator.name.includes('threshold')?<option key={indicator.name} value={indicator.name}>:nul
      {indicator.label}
    </option>
  ))}
</select>