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

Posted 2023-02-23

【中文标题】如何在 JSX 的三元运算符中调用两个函数？

【英文标题】：How to have two function calls inside ternary operator in JSX?

【发布时间】：2018-12-04 19:11:05

【问题描述】：

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

    
      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
    

【问题讨论】：

How to I execute multiple functions on the result of a ternary operation?的可能重复

【参考方案1】：

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

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

或者如果方法本身返回数组，只需传播它们：

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

【讨论】：

感谢它有效，@jonas-w。但是当返回一个这样的组件数组时，我们如何解决唯一 key props 问题呢？

基于原帖评论中链接的可能重复项，对于逗号运算符，这两个函数似乎都执行，但您只能获得右手函数的返回值。所以你不能渲染这两个函数的结果，只能渲染右手一个。而这种数组方法将同时渲染两者，因为所有数组元素都会被渲染。

@geekydude 组件应该有基于其内容的键，否则 react 会为它们分配越来越多的键

【参考方案2】：

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

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

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

【参考方案3】：

将函数包装在括号内，因为如果您使用逗号分隔的函数调用，例如 -this.renderDays(),this.renderCells()，那么它将引发语法错误，因为三元条件允许 ? 和 :。因此，使用括号来包装多个函数调用：

function renderDays()
  console.log('renderDays')

function renderCells()
  console.log('renderCells')

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

【讨论】：

谢谢@ankit。我试过这个，但由于某些原因，它不适用于我的情况，它只呈现了第二个函数调用。

@geekydude703 然后将它们包装在一个新函数中并在三元条件下调用该函数

【参考方案4】：

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

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