如何在样式组件中使用条件呈现,使用React中的样式组件将我的按钮类设置为活动状态?
在CSS中,我会这样做:
<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
在样式组件中,如果我尝试使用'&amp;&amp;'在类名中它不喜欢它。
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>
)
}}
答案 0 :(得分:50)
你可以简单地这样做
<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;
`}
`;
答案 1 :(得分:10)
我没有注意到任何&amp;&amp;在您的示例中,但对于样式化组件中的条件渲染,您可以执行以下操作:
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
background: ${props => props.active ? 'darkred' : 'limegreen'}
`
在上面的情况中,如果没有提供活动道具或者它是假的,当使用活动道具和limegreen渲染StyledYourComponent时背景将变暗 Styled-components自动为您生成类名:)
如果要添加多个样式属性,则必须使用从样式化组件导入的css标记:
我没有注意到任何&amp;&amp;在您的示例中,但对于样式化组件中的条件渲染,您可以执行以下操作:
import styled, { css } from 'styled-components'
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
${props => props.active && css`
background: darkred;
border: 1px solid limegreen;`
}
`
或者您也可以使用object来传递样式,但请记住CSS属性应该是camelCased:
import styled from 'styled-components'
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
${props => props.active && ({
background: 'darkred',
border: '1px solid limegreen',
borderRadius: '25px'
})
`
答案 2 :(得分:3)
我还没有看到这种语法,当您需要将一个完整的块作为条件时,我觉得这是最干净的:
const StyledButton = styled(button)`
display: flex;
background-color: white;
${props => !props.disabled} {
&:hover {
background-color: red;
}
&:active {
background-color: blue;
}
}
`;
因此,无需关闭/打开刻度线即可使其正常工作。
答案 3 :(得分:0)
如果您的状态在类组件中是这样定义的:
class Card extends Component {
state = {
toggled: false
};
render(){
return(
<CardStyles toggled={this.state.toggled}>
<small>I'm black text</small>
<p>I will be rendered green</p>
</CardStyles>
)
}
}
使用基于该状态的三元运算符定义样式化组件
const CardStyles = styled.div`
p {
color: ${props => (props.toggled ? "red" : "green")};
}
`
它应该仅将此处的<p>
标签呈现为绿色。
这是一种非常愚蠢的样式方式
答案 4 :(得分:0)
这是使用TypeScript的简单示例:
import * as React from 'react';
import { FunctionComponent } from 'react';
import styled, { css } from 'styled-components';
interface IProps {
isProcessing?: boolean;
isDisabled?: boolean;
onClick?: () => void;
}
const StyledButton = styled.button<IProps>`
width: 10rem;
height: 4rem;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
&:hover {
background-color: rgba(0, 0, 0, 0.75);
}
${({ disabled }) =>
disabled &&
css`
opacity: 0.5;
cursor: not-allowed;
`}
${({ isProcessing }) =>
isProcessing &&
css`
opacity: 0.5;
cursor: progress;
`}
`;
export const Button: FunctionComponent<IProps> = ({
children,
onClick,
isProcessing,
}) => {
return (
<StyledButton
type="button"
onClick={onClick}
disabled={isDisabled}
isProcessing={isProcessing}
>
{!isProcessing ? children : <Spinner />}
</StyledButton>
);
};
<Button isProcessing={this.state.isProcessing} onClick={this.handleClick}>Save</Button>