在 styled-components div 的 CSS 中未正确使用道具答案

【问题标题】：Props not being used correctly in styled-components div's CSS在 styled-components div 的 CSS 中未正确使用道具
【发布时间】：2019-11-26 13:36:26
【问题描述】：

我有 Item 组件，它们以 itemId 和 itemBeingEdited 作为道具。如果这两者相等（即当前项目确实是正在编辑的项目），则该项目的边框应该是 5px 纯红色。如果它们不相等，则该项目的边框应为 2px 纯黑色。虽然看起来等式被正确评估（来自 console.logs），但 styled-components 将它们都视为评估为 TRUE

工作演示：https://codesandbox.io/s/styled-components-props-border-s9p47

预期：第一个 div 应该有一个 2px 纯黑色边框，第二个 div 应该有一个 5px 纯红色边框。

实际：两个 div 都有红色边框。

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

你必须明确地将道具传递给<ItemWrapper {...props} />。

const Item = props => {
  console.log(props.itemId === props.itemBeingEdited);
  return <ItemWrapper {...props} />;
};

演示：https://codesandbox.io/s/styled-components-props-border-0ettv

【讨论】：