使用标记模板字面量传递更多参数

Question

我正在使用styled-components并使用它们的标记模板字面量语法生成组件，例如：

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)}
  }
`}));

传递值和带标签的模板文字字面量同时进行是可能的吗？还是我走错了方向？

- Aaron Vanston

---

为什么不使用媒体查询 min-width:${somevar}; background-color:papayawhip？ - Jonas Wilms

@Jonasw 感谢您的回复！实际实现稍微复杂一些，需要通过映射断点数组来调用媒体。为了关注点分离和测试，需要将媒体函数与主要的 CSS 代码块分离开来。实际实现可以在此处查看：https://github.com/aaronvanston/react-flexa/blob/master/src/components/Col/Col.js#L16 这有点不正确，因为我需要将更多参数传递到媒体函数中。 - Aaron Vanston

我其实不知道它是否有效，但是media(12,'sth')会不会是一个解决方案呢？ - Jonas Wilms

@Jonasw，我尝试过类似这样的东西，由于标记模板字面量的构造方式似乎只包括其中的字符串而不包括变量。例如，media（12）background-color: $ {SOMEVAR}将生成：@media（min-width：12rem）{ background-color：} 并跳过变量。 - Aaron Vanston

@Jonasw 我该如何更新mediaQuery方法以适应这个？例如：https://gist.github.com/aaronvanston/bc0b15fd68b24bcc05e6196261670b78 - Aaron Vanston

Answer 1

标记模板字面量(Tagged template literals)并没有什么神奇的地方，你只需要从 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
`)

- Bergi

---

感谢您的解释！最终我用了类似的方法使它工作了，传递进来的字符串包含逗号，一个临时的解决方案是将其删除，但可能需要重构它的包含方式。这是我所指的确切行：https://github.com/aaronvanston/react-flexa/pull/62/files#diff-99a45c5816f379ef543d689b1a46dbbdR4 - Aaron Vanston