如何使用样式组件中的对象属性有条件地渲染？答案

【问题标题】：How to conditionally render using object properties in styled-components?如何使用样式组件中的对象属性有条件地渲染？
【发布时间】：2021-07-13 06:00:08
【问题描述】：

我正在尝试在 styled-components 中进行条件渲染。这段代码似乎在这种情况下有效。

background-color: ${props => (props.active ? 'Black' : 'Green')};

我想使用 JSON 文件中的对象属性并为上述条件提供 2 种颜色。类似于下面这些而不是 Black 和 Green。

${colors['Brand/PrimaryBlack']}
${colors['Brand/PrimaryGreen']}

colored.json

{
  "colors": {
    "Brand/PrimaryBlack": "#424449",
    "Brand/PrimaryGreen": "#8ED6C9",
  }
}

styles.js

import styled from 'styled-components'
import { colors } from './colored.json'

const Tabs = styled.button`    
 background-color: ${props => (props.active ? 'Black' : 'Green')};
`

我怎样才能做到这一点？

【问题讨论】：

'Brand/PrimaryBlack' 和 'Brand/PrimaryGreen' 是 colors 对象中的键吗？您能否更新您的问题以包含Minimal, Complete, and Reproducible Code Example？您尝试访问的 colors 对象是什么？
嗨@DrewReese，问题已更新:)

标签： css reactjs styled-components

【解决方案1】：

三元组的工作方式与您之前的代码完全相同，但只是引用了colors JSON 中的键，即background-color: ${props => colors[props.active ? "Brand/PrimaryBlack" : "Brand/PrimaryGreen"]};。

{
  "colors": {
    "Brand/PrimaryBlack": "#424449",
    "Brand/PrimaryGreen": "#8ED6C9",
  }
}

import styled from 'styled-components'
import { colors } from './colored.json'

const Tabs = styled.button`    
  background-color: ${props => colors[props.active ? "Brand/PrimaryBlack" : "Brand/PrimaryGreen"]};
`;

【讨论】：

【解决方案2】：

您可以通过以下方式使用样式化组件做您想做的事：

 background-color: ${(props) =>
    props.active ? colors["Brand/PrimaryGreen"] : colors["Brand/PrimaryBlack"]};

Find the working CodeSandBox here

【讨论】：

【解决方案3】：

在Template literal 内部，您可以在${} 表达式中传递任何有效的JavaScript 代码，甚至调用函数，因此如果您有一个想要访问某些键的对象，您可以像在正常情况下那样访问这些键JavaScript 代码。因此，如果您有一个带有一些属性的对象 colors，您可以像这样在样式化组件内部访问它

const colors = {
    "Brand/PrimaryGreen": "green",
    "Brand/PrimaryBlack": "black"
};

const Comp = styled.div`
    background: ${props => props.active? colors["Brand/PrimaryBlack"] : colors["Brand/PrimaryGreen"]};
    color: #fff;
`;

【讨论】：

【解决方案4】：

你可以这样做

<TagName active={this.state.active}>Test</TagName>

在你的风格中是这样的：

const TagName = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;

  ${({ active }) => active && `
    background: blue;
  `}
`;

【讨论】：