reactjs 样式组件中的条件渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48502647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
conditional rendering in styled components
提问by tom harrison
How can I use conditional rendering in styled-components to set my button class to active using styled-components in React?
如何在样式组件中使用条件渲染来使用 React 中的样式组件将我的按钮类设置为活动状态？
In css I would do it similarly to this:
在 css 中，我会这样做：
<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
In styled components if I try to use '&&' in the classname it doesn't like it.
在样式组件中，如果我尝试在类名中使用 '&&' 它不喜欢它。
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>
)
}}
回答by Jo?o Cunha
You can simply do this
你可以简单地做到这一点
<Tab active={this.state.active} onClick={this.handleButton}></Tab>
And in your styles something like this:
在你的风格中是这样的：
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;
`}
`;
回答by asn007
I didn't notice any && in your example, but for conditional rendering in styled-components you do the following:
在您的示例中，我没有注意到任何 && ，但是对于样式组件中的条件渲染，您可以执行以下操作：
// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
background: ${props => props.active ? 'darkred' : 'limegreen'}
`
In the case above, background will be darkred when StyledYourComponent is rendered with active prop and limegreen if there is no active prop provided or it is falsy Styled-components generates classnames for you automatically :)
在上面的例子中，当 StyledYourComponent 使用 active prop 渲染时，如果没有提供 active prop 或者它是假的，则背景会变成深红色 Styled-components 会自动为你生成类名:)
If you want to add multiple style properties you have to use css tag, which is imported from styled-components:
如果要添加多个样式属性，则必须使用从 styled-components 导入的 css 标记：
I didn't notice any && in your example, but for conditional rendering in styled-components you do the following:
在您的示例中，我没有注意到任何 && ，但是对于样式组件中的条件渲染，您可以执行以下操作：
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;`
}
`
OR you may also use object to pass styled, but keep in mind that CSS properties should be camelCased:
或者你也可以使用 object 来传递样式，但请记住 CSS 属性应该是驼峰式的：
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'
})
`
回答by Saleh Muhammad
Here is an simple example with TypeScript:
这是一个使用 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>
回答by Vincent Tang
If your state is defined in your class component like this:
如果您的状态在类组件中定义如下：
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>
)
}
}
Define your styled-component using a ternary operator based on that state
使用基于该状态的三元运算符定义样式组件
const CardStyles = styled.div`
p {
color: ${props => (props.toggled ? "red" : "green")};
}
`
it should render just the <p>tag here as green.
它应该仅将<p>此处的标签呈现为绿色。
This is a very sass way of styling
这是一种非常sass的造型方式
