如何在React的styled-components中通过条件渲染设置按钮active状态？

嘿，我懂你之前用普通React+CSS的方式设置active类很顺手，但在styled-components里得换个思路，这里有两种常用的解决方法，帮你搞定这个问题：

方法一：通过Props直接控制样式（推荐） #

styled-components最核心的特性就是能接收props来动态生成样式，我们可以直接把active状态作为props传给styled组件，然后在样式里根据这个props来写条件样式：

import React from 'react'
import styled from 'styled-components'

// 定义Tab组件时，通过props.active判断应用的样式
const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;
  // 当active为true时，添加你想要的active样式
  ${props => props.active && `
    background-color: #007bff;
    color: white;
    border-radius: 4px;
  `}
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = { active: false }
    this.handleButton = this.handleButton.bind(this)
  }

  handleButton() {
    // 改成切换状态，和你原来的逻辑一致
    this.setState(prevState => ({ active: !prevState.active }))
  }

  render() {
    return(
      <div>
        {/* 把state里的active作为props传给Tab */}
        <Tab onClick={this.handleButton} active={this.state.active}>Click me</Tab>
      </div>
    )
  }
}

方法二：通过attrs动态设置类名（贴近传统CSS写法） #

如果你还是习惯用类名的方式来控制，那可以用styled-components的attrs方法来动态绑定className，然后在样式里定义.active类的样式：

import React from 'react'
import styled from 'styled-components'

// 使用attrs方法，根据active状态设置className
const Tab = styled.button.attrs(props => ({
  className: props.active ? 'active' : ''
}))`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;

  // 定义active类的样式
  &.active {
    background-color: #007bff;
    color: white;
    border-radius: 4px;
  }
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = { active: false }
    this.handleButton = this.handleButton.bind(this)
  }

  handleButton() {
    this.setState(prevState => ({ active: !prevState.active }))
  }

  render() {
    return(
      <div>
        {/* 同样把active状态作为props传递 */}
        <Tab onClick={this.handleButton} active={this.state.active}>Click me</Tab>
      </div>
    )
  }
}

为什么你原来的方法不生效？ #

因为styled.button生成的是一个React自定义组件，而不是原生的button元素，直接在上面用className={this.state.active && 'active'}的话，styled-components不会自动识别这个类名并关联到对应的样式里，必须通过props或者attrs的方式来传递，才能让组件正确应用条件样式。

内容的提问来源于stack exchange，提问作者tom harrison