使用array.map返回三元运算符

Question

在我的react render函数中，我使用array.map在数组中返回一些JSX代码，然后对其进行渲染。 这似乎不起作用，我在这里阅读了一些问题，建议在if / else块中使用return语句，但在我的情况下不起作用。 我想检查是否在每个数组元素上设置了舍入和持续时间，然后才将其传递给JSX代码。有人可以告诉我另一种方法吗。

render() {
 var interviewProcessMapped = interviewProcess.map((item, index) => {

  return
    {item.round ?
        <div className="row title">
          <div className="__section--left"><span className="section-title">Round {index + 1}</span></div>
          <div className="__section--right">
            <h3>{item.round}</h3>
          </div>
        </div>
        : null
    }

    {
      item.durationHours > 0 || item.durationMinutes > 0 ?
        <div className="row">
          <div className="__section--left">Duration</div>
          <div className="__section--right border">
            {item.durationHours > 0 ? <span>{item.durationHours} Hours</span> : null} {item.durationMinutes > 0 ? <span>{item.durationMinutes} Minutes</span> : null}
          </div>
        </div>
        : null
    }
  });

 return <div>{interviewProcessMapped}</div>
}

Answer 1

{这里不需要：

return {item.round ?

如果使用它，则意味着要返回一个对象。

另一个问题是单独的return意味着return; （ 自动分号插入 ），因此请将条件放在同一行或使用() 。

像这样写：

render() {
    let a, b;
    var interviewProcessMapped = interviewProcess.map((item, index) => {
        a = item.round ?
                <div className="row title">
                    ....
                </div>
            : null;

        b =  (item.durationHours > 0 || item.durationMinutes > 0) ?
                  <div className="row">
                      ....
                  </div>
              : null;

        if(!a || !b)
            return a || b;
        return [a, b];
    });

    return (....)
}

Answer 2

您可能应该结合使用Array.prototype.map（）和Array.prototype.filter（）

无需if在所有

这里的伪代码：

interviewProcess.filter(() => {
    // return only if round and duration set
}).map(() => {
    // transform the filtered list
});