Тегированные литералы шаблона в стилизованных компонентах с необязательным дополнительным параметром

Просто пытаюсь осмыслить стилизованные компоненты, в частности предложение в документации, в котором говорится, что вы можете настроить такие шаблоны медиа-запросов:

const breakpoint = (...args) => {

    return css`
        @media (min-width: 600px) {
            ${css(...args)}
        }
    `
}

Это отлично работает и может быть легко использовано следующим образом:

${media`background: dodgerblue;`}

Я хочу создать несколько шаблонов мультимедиа, но в документации предлагается создать именованные шаблоны, которые можно использовать следующим образом:

${media.large`background: dodgerblue;`}

Я бы предпочел передать моей функции дополнительный параметр, чтобы изменить точку останова, а не создавать отдельную функцию для каждой (не в последнюю очередь потому, что я хочу иметь возможность иметь произвольное количество из них и вызывать их целым числом, а не имя). Я попытался просто передать аргумент шаблонному литералу следующим образом:

const breakpoint = (bp, ...args) => {

    const minWidth = arrayOfBreakpoints(bp);

    return css`
        @media (min-width: ${minWidth}px) {
            ${css(...args)}
        }
    `

}

$breakpoint(1)`background: olive;`
$breakpoint(2)`background: blue;`

Это явно не работает, и я не знаю, как передать дополнительный параметр функции, которую использует тегированный литерал шаблона, поскольку я, очевидно, не понимаю, как они работают. Любые идеи?


javascript styled-components ecmascript-6 template-literals tagged-templates
person jonhobbs    schedule 05.02.2019    source источник
comment
Вы не можете передавать дополнительные аргументы тегированным реализациям шаблонных литералов.   -  person Felix Kling    schedule 06.02.2019
comment
Спасибо, что указали на дубликат, я его не нашел. Стоит ли удалить этот вопрос?   -  person jonhobbs    schedule 06.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вы ищете каррированную функцию:

const breakpoint = (bp) => {
    const minWidth = arrayOfBreakpoints(bp);
    return (...args) => {
        return css`
            @media (min-width: ${minWidth}px) {
                ${css(...args)}
            }
       `;
    };
}

$breakpoint(1)`background: olive;`
$breakpoint(2)`background: blue;`
person Bergi    schedule 05.02.2019