javascript - 在样式组件中定义变量

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

希望下面的代码（不能正常工作）显示我所追求的：

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

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

最佳答案

就我所了解的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}\`);

输出日志将是："The number I saved in a variable is 10"

在Template文字内部，您可以有一个表达式。在内部无法声明变量，因为它的声明如下：
http://2ality.com/2012/09/expressions-vs-statements.html

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