javascript - 大规模创建一个简单的 react 多三元运算符来合并数组？

Question

我希望在 React 中创建一个简洁的多三元操作，根据存在的 props 将数组与不同的组合合并在一起。

小规模的例子，我有:

array3 应始终输出。

array2 只能与 array3(或 array1)合并，如果 this.props.data.array2存在。

array1 只能与 array3(或 array2)合并，如果 this.props.data.title1存在。

{
  this.props.data.title3
    ? this.props.data.title2
      ? this.props.data.title1
        ? [...array1, ...array2, ...array3]
        : [...array2, ...array3]
      : [...array2, ...array3]
    : [...array3];
}

但是随着组合的增多，我必须制作更多次。

我可能有 100 种组合，并且我正在寻找一种简单的方法来简洁地编写此组合，因此我不必编写过多的多三元运算符来获得所需的输出。

如有任何帮助，我们将不胜感激!

Answer 1

您应该使用简单的 if block ，并将所需的值添加到 array3

this.props = {
  data: {
    title1: true,
    title2: false,
    title3: true
  }
}

let array3 = [3]
let array2 = [2]
let array1 = [1]

if(this.props.data.title2){
  array3 = [...array3,...array2]
}


if(this.props.data.title1){
  array3 = [...array3, ...array1]
}

console.log(array3)

注意:-如果您想合并所有具有真实值的标题的数组，您可以简单地创建一个执行此合并部分的函数并调用它标题，而不是为每个标题重复 if block