组件变体的笛卡尔组合

Question

假设我有一个对象，指定按钮组件的输入以及该输入的可能值。

const buttonVariants = {
  colorMode: ['on-dark','on-light'],
  size: ['small','medium','large']
};

如何创建笛卡尔函数来为所有可能的变体组合生成模板？我希望能够为多个组件重复使用此函数，因此指定我需要此函数来处理

n

变体非常重要。

我希望实现类似this的目标，但输出将是：

[
  '<button colorMode="on-dark" size="small">button</button>',
  '<button colorMode="on-dark" size="medium">button</button>',
  '<button colorMode="on-dark" size="large">button</button>',
  '<button colorMode="on-light" size="small">button</button>',
  '<button colorMode="on-light" size="medium">button</button>',
  '<button colorMode="on-light" size="large">button</button>'
]

Answer 1

您可以使用

Array::flatMap()

映射所有颜色/尺寸组合：

const buttonVariants = {
  colorMode: ['on-dark','on-light'],
  size: ['small','medium','large']
};

const buttons = buttonVariants.colorMode.flatMap(c => 
  buttonVariants.size.map(s => `<button colorMode="${c}" size="${s}">button</button>`)
);

console.log(buttons);