Как иметь два вызова функции внутри тернарного оператора в JSX?

Question

Я пытаюсь отобразить два компонента, если условие выполняется внутри троичного оператора.Тем не менее, только 2-й компонент отображается.Как я могу, вероятно, поставить два вызова функций после условий?

    {
      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   }

Ссылка: Как выполнить несколько функций в результате троичногоработа

Answer 2

Вы можете вернуть массив компонентов:

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

Или, если методы возвращают сами массивы, просто распространите их:

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

Answer 3

Вы можете легко объединить обе функции в паратезе, а затем разделить их с помощью запятой, а затем легко вызвать обе.

Они будут обрабатываться внутри системы только как вызов функции.

Answer 4

Оберните функции внутри круглых скобок, потому что если вы используете вызов функции, разделенный запятыми, например - this.renderDays(),this.renderCells(), тогда вы получите синтаксическую ошибку, так как троичные условия позволяют ? и :.Итак, используйте скобки для переноса вызова нескольких функций:

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