这个带有箭头的嵌套 Javascript 模板文字是如何工作的？

Question

下面的代码取自 Styled Components 示例。

完整代码：

import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${props =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `};
`

问题：

我想了解的是以下模板文字评估如何工作？

代码：

${props =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `};

这个表达式是否在 litreal 中 return将字符串转换为由反引号定义的上字符串 litreal？
=> 函数在模板文字中是如何工作的？
这里的条件判断如何工作？它是 return 一个 true/false 还是它计算最后一个语句 return 如果为真则函数？

Answer 1

这里有很多花哨的 ES6 语法。我会逐行分解。

前几行，

background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0 1em;
padding: 0.25em 1em;

只是应用于元素的基本 CSS。然后，我们有一个 ${} 允许我们在模板文字中使用 JS 对象。在这里，代码使用箭头函数 => ，这与匿名函数非常相似。这些都是等价的：

() => {
// do things
}
function () {
// do things
}
() => /* do a single line expression and return */

所以在插值中，代码只是在做一个函数。在 Styled Components 中，带有函数的插值意味着一些 CSS 依赖于组件参数，因此您可以指定 color、font、background-preset 等参数。 ..

那么，&& 运算符所做的就是它可以被认为是一个 shorthand “如果”。来自 MDN：

More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.

所以如果 props.primary 为真，那么它将 return CSS,

background: palevioletred;
color: white;

但如果不是，则 return 无论 props.primary 是什么。在示例中，props.primary 是 true 或 undefined。当undefined时，它return是undefined。引用自 styled components docs:

Speaking of which, during flattening, styled-components ignores interpolations that evaluate to undefined, null, false, or an empty string (""), which means you're free to use short-circuit evaluation to conditionally add CSS rules.

所以当它 returns undefined 样式组件将忽略它。

这个带有箭头的嵌套 Javascript 模板文字是如何工作的？

How does this Nested Javascript Template Literal with Arrow work?

javascript

ecmascript-6

reactjs

styled-components

完整代码：

问题：

代码：