![](/img/trans.png)
[英]Pass arguments of a Tagged Template Literals function to another one?
[英]Passing further arguments with tagged template literals
我正在使用样式组件并使用其标记的模板文字语法生成组件,例如:
const Button = styled.button`
background-color: papayawhip;
border-radius: 3px;
color: palevioletred;
`
在一种情况下,我需要调用一个函数,该函数基于断点生成媒体查询, 并传递要包含在其中的标记的css模板文字。
例如:
media(12)`
background-color: papayawhip;
`
媒体功能可能如下所示:
const media = mapValues(width => ({ css: (...args) => css`
@media (min-width: ${width}rem) {
${css(...args)}
}
`}));
是否可以传递值和标记的模板文字,或者我是否以错误的方式进行此操作?
标记模板文字并不神奇,您只需要从media(12)
调用中返回另一个函数:
function media(twelve) {
return function(stringParts, ...interpolationValues) {
return …
}
}
或使用箭头功能
const media = (twelve) => (stringParts, ...interpolationValues) => …;
被称为
media(12)`firstPart ${13} secondPart`
// or equvialently
media(12)(["firstPart ", " secondPart"], 13)
但是,如果您不需要进行任何插值但只想接收字符串,则可能更容易使用参数编写函数
function media(twelve, string) {
return …;
}
并称之为
media(12, `
templateString
`)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.