Декартовы комбинации для вариантов компонентов
Допустим, у меня есть объект, определяющий входные данные для компонента кнопки и возможные значения этого ввода.
const buttonVariants = {
colorMode: ['on-dark','on-light'],
size: ['small','medium','large']
};
Как я могу создать декартову функцию для создания шаблонов для всех возможных комбинаций вариантов? Я хотел бы иметь возможность повторно использовать эту функцию для нескольких компонентов, поэтому важно указать, что мне нужно, чтобы она работала для n вариантов.
Я надеюсь добиться чего-то вроде этого, но где будет результат:
[
'<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>'
]
Кажется, вы могли бы использовать пример, на который вы ссылаетесь, а затем сопоставить его для получения желаемого результата.
Как насчет того, чтобы попробовать вложенный цикл? Для всех цветовых режимов выполните цикл по всем размерам и создайте включенный результат.
Вы можете напрямую изменить приведенный вами пример: демо — свести эти результаты в массив строк не займет много времени.
почему бы не сделать вот так: stackoverflow.com/q/54343749/1447675
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать 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.info(buttons);Этого можно добиться, сначала создав универсальную функцию для генерации декартова произведения нескольких массивов. Эта функция будет полезна для генерации всех возможных комбинаций имеющихся у вас вариантов. Затем вы можете сопоставить эти комбинации для создания нужных шаблонов кнопок. Давайте реализуем это на JavaScript:
function cartesianProduct(arrays) {
return arrays.reduce((acc, currentValue) =>
acc.flatMap(c => currentValue.map(value => [...c, value])),
[[]]);
}
function generateButtonTemplates(variants) {
// Extract variant keys and their possible values
const keys = Object.keys(variants);
const values = keys.map(key => variants[key]);
// Generate all combinations of variant values
const combinations = cartesianProduct(values);
// Map each combination to a button template
return combinations.map(combination => {
const attributes = combination.map((value, index) => `${keys[index]} = "${value}"`).join(' ');
return `<button ${attributes}>button</button>`;
});
}
const buttonVariants = {
colorMode: ['on-dark', 'on-light'],
size: ['small', 'medium', 'large']
};
console.info(generateButtonTemplates(buttonVariants));
Запустив этот код, вы получите выходные данные в указанном вами формате, что позволит вам создавать шаблоны для всех возможных комбинаций вариантов.
что ты уже испробовал?