Javascript 检查样式化组件中的组件道具

我有一个组件，它接受运行另一个组件的道具。看起来是这样的：

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

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

---

问题是，我不知道如何在

样式化组件中执行条件签入。检查
Facebook
将不起作用——因为我没有向
name
组件传递字符串。那么，我应该检查什么呢？
像这样的东西怎么样

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

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

你也可以用函数代替对象映射。
好的，所以我想出来了。这是有效的检查：

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

这就是为什么这是有效的

当我有以下组件时：
，prop值
{Facebook}
是一个名为Facebook的函数。这就是我需要检查的，一个具有特定函数名的函数。因此，我所要做的就是省去引号，它就可以工作了。
您可以这样在样式化组件中使用三元条件：

const Button=样式化。按钮

背景：${props=>props.name=='Facebook'？'3b5998'：'white'}；
；
这不是遇到了我已经遇到的相同问题吗？也就是说，我不知道props.name返回的值是多少？您可以只传递一个额外的prop。另外，您可以使用React.createElement，并使用props.name创建组件并以这种方式传递props。。
${props => props.name === "Facebook" && `background-color: #3b5998`}

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

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