Question

我有一个接受可以运行另一个组件的道具的组件。看起来像这样：

const IconBase = styled.div`
  // Css Styles Go Here
`;

const Icon = props => (
  <IconBase>
    <props.name />
  </IconBase>
);

此组件的工作方式如下：<Icon name={Facebook} />-基本上等同于以下内容：

<Icon><Facebook /></Icon>

<Facebook />组件来自react-icons。

现在，这一切都如我所愿。我现在想做的是在Styled-Components中检查名称prop，然后输出适当的背景色。像这样：

${props => props.name === "Facebook" && `background-color: #3b5998`}

问题是，我不知道如何在Styled-Components中进行条件检查。检查Facebook不起作用-因为我没有将字符串传递给name组件。那我应该检查什么？

Answer 1

这样的事情怎么样？

const mapBackgroundStyle = {
    'facebook': 'background-color: #3b5998'
};

const Button = styled.button`
  background: ${props => mapBackgroundStyle[props.name]};
`;

您还可以使用函数代替对象映射。

Answer 2

好的，所以我知道了。这是有效的支票：

${props => props.name === Facebook ...

这就是它起作用的原因...

当我具有以下组件：<Icon name={Facebook} />时，prop值{Facebook}是一个名为Facebook的函数。这就是我需要检查的，具有特定函数名称的函数。因此，我要做的就是不用引号，而且可以使用。

Answer 3

您可以通过以下方式在样式化组件中使用三元条件：

const Button = styled.button select incrementWindow_end, dimension, distinct(userId) from table group by incrementWindow(Time.days(1), Time.minutes(1)), dimension;

检查样式化零部件中的零部件支撑

3 个答案: