리액트 - 스타일 컴포넌트를 사용한 패싱 소품

리액트 - 스타일 컴포넌트를 사용한 패싱 소품

방금 읽었어요styled-components 다음 사항이 잘못되어 렌더링 시간에 영향을 미친다는 문서입니다.그렇다면 어떻게 코드를 리팩터링하고 필요한 소품을 사용하여 역동적인 스타일을 만들 수 있을까요?

잘 부탁드립니다.

탭 컴포넌트

import React from 'react'
import styled from 'styled-components'

const Tab = ({ onClick, isSelected, children }) => {
    const TabWrapper = styled.li`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    margin: 1px;
    font-size: 3em;
    color: ${props => (isSelected ? `white` : `black`)};
    background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
    cursor: ${props => (isSelected ? 'default' : `pointer`)};
`

    return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}


export default Tab

설명서에서 말하는 것은 렌더링 컴포넌트에 스타일을 포함시키지 않는 것이 좋습니다.

이 작업을 수행합니다.

const StyledWrapper = styled.div`
  /* ... */
`

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>
}

이것 대신에

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `

  return <StyledWrapper>{message}</StyledWrapper>
}

컴포넌트의 프로포트가 변경되면 컴포넌트가 다시 렌더링되고 스타일이 재생성되기 때문입니다.따라서 따로 보관하는 것이 좋습니다.

'소품 기반 적응' 섹션을 자세히 읽어보시면 다음과 같은 설명이 나옵니다.

const Button = styled.button`
  /* Adapt the colours based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// class X extends React.Component {
//  ...

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

// }

클래스 X에서 버튼 컴포넌트를 사용하면 아무것도 말하지 않아도 클래스 X의 소품을 알 수 있기 때문입니다.

귀사의 시나리오에서 솔루션은 다음과 같습니다.

const TabWrapper = styled.li`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  margin: 1px;
  font-size: 3em;
  color: ${props => (props.isSelected ? `white` : `black`)};
  background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
  cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;

const Tab = ({ onClick, isSelected, children }) => {
  return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}

const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>

아직 테스트도 안 했으니까, 시험해 보고, 당신에게 도움이 되는지, 도움이 되는지 알려주세요!

다음과 같이 Typescript를 사용하여 인수를 전달할 수 있습니다.

<StyledPaper open={open} />    

...

const StyledPaper = styled(Paper)<{ open: boolean }>`
   top: ${p => (p.open ? 0 : 100)}%;
`;

또 다른 방법은

const StyledDiv = styled.div.attrs((props: {color: string}) => props)`
    width: 100%;
    height: 100%;
    background-color: ${(props) => props.color};
`

//...

render() {
    return (
        <StyledDiv color="black">content...</StyledDiv>
    );
}

이렇게 하면 스타일링된 컴포넌트에 보내는 소품에서 안전한 타입이 됩니다.(타이프 스크립트로 코딩할 때 좋습니다.)

기능 컴포넌트를 사용한 간단한 예를 다음에 나타냅니다.

다각형과 같은 화살표가 있고 그 중 두 개가 서로 다른 방향을 가리켜야 한다고 가정합니다.소품별로 회전값을 전달할 수 있습니다.

               <Arrow rotates='none'/>
          
               <Arrow rotates='180deg'/>

그런 다음 컴포넌트 화살표에서는 일반 컴포넌트와 같은 소품을 스타일 컴포넌트에 전달해야 하지만 스타일 컴포넌트에서는 소품처럼 사용해야 합니다.

    import React from 'react';
    import styled from "@emotion/styled";

    const ArrowStyled = styled.div`
      background-color: rgba(255,255,255,0.9);
      width: 24px;
      height: 30px;
      clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);
      transform: rotate(${props => props.rotates});
     `


const Arrow = ({rotates}) => {
    return (
       <ArrowStyled rotates={rotates}/>
    );
}

export default Arrow;
           

Typescript를 사용하는 경우 스타일 파일 내에 인터페이스를 만듭니다.그렇지 않으면 CSS의 소품에 액세스할 수 없습니다.

import styled from 'styled-components'

interface StyledLiProps{
  selected: boolean
}

export const TabWrapper = styled.li`
    
// styles ...

color: ${props => (selected ? `white` : `black`)};
background-color: ${props => (selected ? `black` : `#C4C4C4`)};
`

그리고 CSS에서 사용하고 싶은 소품을 JSX에 명시하는 것을 잊지 마세요.

interface TabProps{
  text: string;
}

const Tab = ({ text }: TabProps) => {
 
//...
  
return <TabWrapper selected={isSelected} onClick={() => updateTab}>{text}</TabWrapper>


}

스타일 구성 요소 설명서에서 다양한 테마에 대해 반응 컨텍스트 API [2]를 사용하는 예를 제시한다고 생각해 보십시오.

[1] https://www.styled-components.com/docs/advanced

[2] https://reactjs.org/docs/context.html

스타일 구성 요소 내보내기

단추

그리고 지나간다scrollPosition기능적 구성요소의 지주로서

PropsToSyled 컴포넌트 통과

import styledComponents from "styled-components";
            
export const Button = styledComponents.div`
       position: ${ props => props.scrollPosition ? 'relative' : 'static' };
`;
export const PassingPropsToSyledComponent = ()=> {
   return(
   <Button scrollPosition={scrollPosition}>
       Your Text Here
   </Button>
   )
}

언급URL : https://stackoverflow.com/questions/52321539/react-passing-props-with-styled-components