如何在 React 中使用 styled-components 中的条件渲染将我的按钮类设置为活动按钮?
在 css 中我会做类似的事情:
<button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
在样式化组件中,如果我尝试在类名中使用“&&”,它不喜欢这样。
import React from 'react' import styled from 'styled-components' const Tab = styled.button` width: 100%; outline: 0; border: 0; height: 100%; justify-content: center; align-items: center; line-height: 0.2; ` export default class Hello extends React.Component { constructor() { super() this.state = { active: false } this.handleButton = this.handleButton.bind(this) } handleButton() { this.setState({ active: true }) } render() { return( <div> <Tab onClick={this.handleButton}></Tab> </div> ) }}
你可以简单地这样做
<Tab active={this.state.active} onClick={this.handleButton}></Tab>
在你的风格中是这样的:
const Tab = styled.button` width: 100%; outline: 0; border: 0; height: 100%; justify-content: center; align-items: center; line-height: 0.2; ${({ active }) => active && ` background: blue; `} `;