Question

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

精确地，当呈现taskCard时，如果任务的userId = 0，我希望选择框预先填充有“ Assign To：”作为选项，并且我希望公司的所有员工都作为下面的选项出现。如果任务的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>

但是，这并没有为我提供我想要的“分配给：”选项。

Answer 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

Answer 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>

这正是我希望让应用程序完成的工作。非常感谢您的想法和帮助！

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

2 个答案: