javascript - 在 styled-components 中定义变量

Question

是否可以在 styled-components 组件中定义变量？

希望下面的代码(不工作)显示我所追求的:

const Example = styled.div`
  ${const length = calc(vw - props.someValue)}

  width: ${length};
  &.disable {
    width: ${length};
  }  
`

Answer 1

据我了解Template Literal 的 指南，此代码将不起作用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

模板文字是那些在 div 之后包装代码的反引号。

const Example = styled.div`here`

假设:

const num = 10;
console.log(\`The number I saved in a variable is ${num}\`);

输出日志将是:“我保存在变量中的数字是 10”

在模板文字中，您可以有一个表达式。在内部声明一个变量是不可能的，因为它是一个语句: http://2ality.com/2012/09/expressions-vs-statements.html

所以这个问题更多的是关于 Javascript 的核心，然后是 styled-components 本身。