如何将数字作为道具传递给样式化组件？答案

【问题标题】：How to pass a number as a prop to a styled component?如何将数字作为道具传递给样式化组件？
【发布时间】：2020-07-30 11:49:22
【问题描述】：

我正在尝试根据其中的项目数来定位 div。我可以通过道具传递数字，但模板文字将其插入为字符串。有没有办法让它将其转换为数字以便能够正确进行此计算？

const BoxTray = styled.div`
  position: fixed;
  bottom: calc(0 + (290px * ${props => props.contents}));
';

编辑：我刚刚注意到似乎没有任何东西从道具传递...在检查元素时，规则显示为bottom: calc(290 * )。无论px是否存在，都是一样的。

【问题讨论】：

不确定你想要达到什么目的......但使用 290px 是一个字符串而不是一个数字。至于将字符串转换为数字，您可以使用 javascript 的 parseInt 函数。您可能应该创建自己的返回整数的函数
我有一个各种各样的购物车，它的顶部显示购物车中的物品数量。我希望将购物车定位为仅显示顶部（其余部分隐藏在视口底部下方）。我可以找出必要的 JS 和 CSS 来重新定位它，以便在我可以对这部分进行排序时看到购物车的内容。 290px 是购物车中每件商品的高度。所以我试图用所有项目的总高度来偏移 div 的位置。
在将px 添加到它之前，将 290 乘以 prop。你不能乘以字符串。
我试过这个。不确定这是否只是 prettier 的问题（我在保存时有代码格式），但是当我将 px 放在 calc() 函数之外时，prettier 在它和函数之间插入了一个空格，就好像它无法识别一样它是价值的一部分。无论这是否是问题，无论我尝试了什么，div 都位于页面顶部，就好像底部：规则只是被忽略了。
如果您在模板文字中拥有所有 JS 能力，为什么还要使用 calc？

【解决方案1】：

假设contents prop 是一个数字，你可以这样做。

const BoxTray = styled.div`
  bottom: ${props => props.contents * 290}px;
  position: fixed;
`;

然后像这样使用它：

<BoxTray contents={2}>
  {/*  */}
  {/*  */}
</BoxTray>

【讨论】：