Question

如果三元运算符中满足该条件，我将尝试渲染两个组件。但是，仅呈现第二个组件。在条件之后如何放置两个函数调用？

    {
      views === "monthly"
      ? this.renderDays(),
        this.renderCells()
      : null
    }

我尝试了以下方法（都不起作用）

    {
      views === "monthly"
      ? this.renderDays(),
        this.renderCells()
      : null
    }

    {
      views === "monthly"
      ? (this.renderDays(), this.renderCells())
      : null
    }

    {
      views === "monthly"
      ? (this.renderDays(); this.renderCells())
      : null
    }

Answer 1

您可以返回一个组件数组：

{
  views === "monthly"
  ? [this.renderDays(), this.renderCells()]
  : null
}

或者，如果方法本身返回数组，则将它们散布起来：

 {
  views === "monthly"
  ? [...this.renderDays(), ...this.renderCells()]
  : null
}

Answer 2

您可以使用逗号分隔表达式并将其包装在带有三元括号的单个语句中。

{  views === "monthly"  ? (this.renderDays(), this.renderCells()): null   }

参考：How to I execute multiple functions on the result of a ternary operation?

Answer 3

将函数包装在括号内，因为如果使用逗号分隔的函数调用（例如-this.renderDays(),this.renderCells()），则在三元条件允许?和:的情况下，它将引发语法错误。因此，请使用括号来包装多功能调用：

function renderDays(){
  console.log('renderDays')
}
function renderCells(){
  console.log('renderCells')
}
1 == 1? (renderDays(), renderCells()): console.log('False');

Answer 4

您可以轻松地将两个函数组合在一个括号中，然后在逗号的帮助下将它们分开，然后就可以轻松调用这两个函数。

它们仅在内部被视为函数调用。

JSX中的三元运算符内如何有两个函数调用？

4 个答案: