尝试（和失败）在 JSX 中编写 if/else 表达式答案

【问题标题】：Trying (and failing) to write if/else expression in JSX尝试（和失败）在 JSX 中编写 if/else 表达式
【发布时间】：2019-04-23 03:02:11
【问题描述】：

我正在尝试编写一个 if/else 或条件语句，它在不同的条件下返回一个带有不同选项的选择框。

确切地说，当呈现任务卡时，如果任务的 userId = 0，我希望选择框预先填充“分配给：”作为选项，并且我希望公司的所有员工都显示为下面的选项。如果任务的 userId 与员工的 Id 匹配，我希望员工的姓名预填充框，公司的其余员工也显示为选项。

出于某种原因，我不知道该怎么做。我知道 React 不允许 if/else 语句，但即使将其写为三元语句也给我带来了问题。我目前有工作：

{this.props.employees.map(employee => {
  if (employee.id === this.props.task.userId) {
  return <option key={employee.id} id={employee.id} defaultValue={employee.id} selected>
  {employee.name} {employee.surname}
  </option>

  }  else {

  return <option key={employee.id} id={employee.id} value={employee.id} >
  {employee.name} {employee.surname}
  </option>
      }
    })}
   </select>

但这并没有为我提供我正在寻找的“分配给：”选项。

【问题讨论】：

我想这就是你要找的东西：stackoverflow.com/a/42316092

标签： reactjs

【解决方案1】：

可以简化第一部分以减少代码重复。您的条件的唯一区别是 selected 道具，因此如果 employee.id === this.props.task.userId 等于 true，则它被选中，否则不被选中。

<select defaultValue={...}>
{this.props.employees.map(employee => (
  <option
    key={employee.id}
    id={employee.id}
    selected={employee.id === this.props.task.userId}
  >
    {employee.name} {employee.surname}
  </option>
));
</select>

“分配给”选项可以简单地在地图迭代之前或之后添加。

<select defaultValue={this.props.task.userId}>
  {this.props.task.userId === 0 
    ? <option value="0">Assign To:</option> 
    : null
  }

  {this.props.employees.map(employee => (
    <option
      key={employee.id}
      id={employee.id}
      selected={employee.id === this.props.task.userId}
    >
      {employee.name} {employee.surname}
    </option>
  ))};
</select>

See the docs about conditional rendering

【讨论】：

【解决方案2】：

根据下面的建议和一些额外的指导，我得出了以下解决方案：

{this.props.task.userId === 0
 ? <option value="0">Assign To:</option>
 : ""}

 {this.props.employees.map(employee => (
 <option
   key={employee.id}
   id={employee.id}
   defaultValue={employee.id}
   selected={employee.id === this.props.task.userId}
                                    >
   {employee.name} {employee.surname}
   </option>
   ))
   };
   </select>

这正是我希望让应用程序做的事情。非常感谢您的想法和额外的眼睛！

【讨论】：