样式组件中的条件渲染

IT技术 reactjs styled-components
2021-03-29 10:59:32

如何在样式组件中使用条件渲染来使用 React 中的样式组件将我的按钮类设置为活动状态？

在 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>
     )
  }}
6个回答

你可以简单地做到这一点

<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;
  `}
`;
它false在 CSS 字符串中添加了一个，可能会引起麻烦
2021-05-23 10:59:32
在 TypeScript 中，您需要使用({ active }: any)或withProps。
2021-05-30 10:59:32
@LucasWillems 如果您使用过时的 babel 转译器并对其做出反应。React 不再呈现虚假值
2021-06-03 10:59:32
条件代码不应包含在普通的反引号中，而应包含在 css``
2021-06-03 10:59:32
2021-06-10 10:59:32

我在您的示例中没有注意到任何 && ，但是对于样式组件中的条件渲染，您可以执行以下操作：

// Props are component props that are passed using <StyledYourComponent prop1="A" prop2="B"> etc
const StyledYourComponent = styled(YourComponent)`
  background: ${props => props.active ? 'darkred' : 'limegreen'}
`

在上面的例子中，当 StyledYourComponent 使用 active prop 渲染时，如果没有提供 active prop 或者它是假的，则背景会变成深红色 Styled-components 会自动为你生成类名:)

如果要添加多个样式属性，则必须使用从 styled-components 导入的 css 标记：

我在您的示例中没有注意到任何 && ，但是对于样式组件中的条件渲染，您可以执行以下操作：

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 属性应该是驼峰式的：

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'
  })
`
@CodeFinity 就在那里：styled-components.com/docs/api#css
2021-05-29 10:59:32
{ css }- 👏🏽。我不知道。它在文档中的何处？
2021-06-09 10:59:32

这是一个使用 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>

我还没有见过这种语法，我觉得当你需要做一个完整的块有条件时，这是最干净的：

const StyledButton = styled(button)`
    display: flex;
    background-color: white;

    ${props => !props.disabled} {
        &:hover {
            background-color: red;
        }

        &:active {
            background-color: blue;
        }
    }
`;

所以没有必要关闭/打开刻度来让它工作。

它在我经常使用语法时起作用。您可能希望在其中放置一个 console.log 以检查“foo”是否已实际定义。
2021-06-05 10:59:32
是的，我确认当我尝试执行以下操作时 TS 会抱怨： ${(props) => props.$isSelected} { ...
2021-06-07 10:59:32
你能详细说明一下吗？我不明白它为什么起作用，这是否特定于样式化组件的工作方式？
2021-06-11 10:59:32
我喜欢这种语法，但你确定它适用于非布尔检查吗？（例如 props => props.foo === "bar"）对我来说检查特定值似乎不起作用
2021-06-15 10:59:32

如果您的状态在您的类组件中定义如下：

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>此处的标签呈现为绿色。

这是一种非常sass的造型方式

其它你可能感兴趣的问题
上一篇使用 css module如何定义多个样式名称 下一篇React - 如何在props中传递 HTML 标签？