스타일 구성요소의 조건부 렌더링

스타일 구성요소의 조건부 렌더링

스타일 구성요소의 조건부 렌더링을 사용하여 대응에서 스타일 구성요소를 사용하여 단추 클래스를 활성으로 설정하는 방법

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;
  `}
`;

나는 너의 예에서 &&&를 알아차리지 못했지만, 스타일 구성요소의 조건부 렌더링을 위해 당신은 다음을 한다.

// 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가 활성화된 소품 및 라임그린으로 렌더링될 때 배경은 어둡게 표시되며, 제공된 활성 소품이 없거나 거짓 소품인 경우 StyledYour Component가 자동으로 클래스 이름을 생성함 :)

여러 스타일 속성을 추가하려면 스타일 구성 요소에서 가져온 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;`
  }
`

또는 스타일을 전달하기 위해 물체를 사용할 수도 있지만 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'
  })
`

다음은 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;
        }
    }
`;

따라서 작동하기 위해 체크 표시를 닫거나 열 필요가 없다.

상태가 다음과 같이 클래스 구성 요소에 정의된 경우:

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>
    )
  }
}

해당 상태에 따라 3차 연산자를 사용하여 스타일 구성 요소 정의

const CardStyles = styled.div`
  p {
    color: ${props => (props.toggled ? "red" : "green")};
  }
`

그것은 단지 ...을 제공할 것이다.<p>여기에 녹색으로 딱지를 붙이다

이것은 아주 얄팍한 스타일링이다.

classNames를 조건부로 적용하면 classNames도 사용할 수 있을 것으로 보인다.

const BoxClassname = styled.div.attrs((props) => ({
  className: clsx(props.$primary && "primary")
}))`
  background: #000;
  height: 1px;
  width: 50px;
  &.primary {
    background: pink;
  }
`;

/*
// You could also use a second component instead of .attrs
export const BoxClassname = (props) => {
  return (
    <BoxClassnameWrapper
      className={clsx(props.$primary && "primary")}
      {...props}
    />
  );
};
*/

이 구문에서 내가 좋아하는 것은 JS와 CSS를 너무 많이 섞지 않는다는 것이다.

속도가 느려 보인다는 점이 제한적이다. 성능 비교를 위해 이 데모 코드 샌드박스를 참조하십시오.나는 논리적으로 왜 :/를 이해 못 하겠어.

나는 Josh Comeau가 Styled Components에서 CSS 변수를 사용하는 것을 읽고 이런 생각을 했다.

• CSS 변수 구성...변수(색상 등)
• 논리적으로,classNames+ CSS 선택기를 사용하여 조건을 정의하십시오.

결국, 이 논리는 이미 CSS에 존재하며, className은 이미 조건부 렌더링을 처리하기 위한 것이다.스타일링 컴포넌트는 스타일을 깨끗하게 격리시키고 고급 시나리오를 처리하는 데 도움을 주지만, 스타일에 너무 간섭하는 것은 싫다.

참조URL: https://stackoverflow.com/questions/48502647/conditional-rendering-in-styled-components