对象 INSIDE 数组的条件渲染答案

【问题标题】：Conditional rendering of object INSIDE array对象 INSIDE 数组的条件渲染
【发布时间】：2021-12-26 12:47:58
【问题描述】：

我有一堆汽车。我想插入带有标题的对象：AUDI 仅当 audi 为真时。

var audi = false;
var cars= [
   {header: 'fiat',accessor: row},
   {header: 'audi',accessor: row},
   {header: 'bmw',accessor: row}
]

我尝试使用三元运算符，但汽车不接受空对象 {}。那么有没有办法模拟我们通常对条件渲染所做的事情呢？（例如：audi &&{...}）谢谢

var audi = false;
var cars= [
   {header: 'fiat',accessor: row},
   audi?{header: 'audi',accessor: row}:{},
   {header: 'bmw',accessor: row}
]

【问题讨论】：

标签： javascript arrays reactjs object conditional-rendering

【解决方案1】：

你可以使用filter method:

var audi = false;
var cars= [
   {header: 'fiat',accessor: row},
   {header: 'audi',accessor: row},
   {header: 'bmw',accessor: row}
].filter(car => audi || car.header !== 'audi')

或spread operator:

var audi = false;
var cars= [
   {header: 'fiat',accessor: row},
   ...(audi ? [
      {header: 'audi',accessor: row}
   ] : []),
   {header: 'bmw',accessor: row}
]

【讨论】：