Przechodząc kolejne argumenty ze znacznikami literałów szablonów

Question

pracuję z styled-components i wytwarzających komponenty przy użyciu ich składnię dosłownego oznaczone szablonu takie jak:

const Button = styled.button` 
    background-color: papayawhip; 
    border-radius: 3px; 
    color: palevioletred; 
` 

W jednym przypadku muszę wywołać funkcję, która generuje zapytania mediów w oparciu w punkcie przerwania i przekazuje oznaczoną literałową literę css do dołączenia do.

na przykład:

media(12)` 
    background-color: papayawhip; 
` 

Funkcja mediów może wyglądać mniej więcej tak:

const media = mapValues(width => ({ css: (...args) => css` 
    @media (min-width: ${width}rem) { 
    ${css(...args)} 
    } 
`})); 

przechodzi zarówno wartość i oznaczony szablon dosłowne możliwe, czy ja mam o tym źle droga?

Answer 1

Tagged template literals to nie magia, po prostu trzeba wrócić inną funkcję z rozmowy media(12):

function media(twelve) { 
    return function(stringParts, ...interpolationValues) { 
    return … 
    } 
} 

lub za pomocą strzałek funkcji

const media = (twelve) => (stringParts, ...interpolationValues) => …; 

być nazywany jako

media(12)`firstPart ${13} secondPart` 
// or equvialently 
media(12)(["firstPart ", " secondPart"], 13) 

Jednakże, jeśli nie musisz robić bu burzenia interpolacji t po prostu chcesz otrzymać ciąg, może łatwiej będzie napisać funkcję z parametrami

function media(twelve, string) { 
    return …; 
} 

i nazywają go jako

media(12, ` 
    templateString 
`)