React styled-components 구성 요소 속성 설정 방법

문제.
최근 에 react 로 음악 재생 기 를 만들어 보 려 고 했 습 니 다.그 전에 styled-components 를 몰 랐 지만 css in js 를 사용 하여 hover 효 과 를 실현 하려 고 했 기 때문에 바 이 두 는 여러 가지 해결 방안 을 통 해 styled-components 라 는 좋 은 것 을 발 견 했 습 니 다.이 블 로 그 를 보 았 다 면 styled-components 를 이해 하거나 능숙 하 게 활용 해 야 한 다 는 것 을 증명 합 니 다.
프로젝트 개발 로 돌아 가면 하나의 음악 재생 기 는 여러 구성 요소 로 구성 되 어야 합 니 다.그 중 하나의 list 구성 요 소 는 노래 목록 을 보 여 주 는 데 사 용 됩 니 다.이렇게
 
거위내 취향 이 드 러 난 것 같은 데...
모든 열 은 하나의 div(물론 ul 도 가능 합 니 다)입 니 다.후속 기능 의 실현 을 편리 하 게 하기 위해 저 는 모든 노래의 포스터,오디 오 파일 의 주 소 를 div 의 속성 으로 저장 합 니 다.list 구성 요소 의 코드 는 다음 과 같 습 니 다.

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

//     
const ContentDiv = styled.div`
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  transition: 0.5s;
  cursor: pointer;
  &:hover{
    color: #31c27c;
  }
`;

const LengthDiv = styled.div`
  color: #999;
`;

// list  
class List extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    //     
    list: this.props.list
   };
  }

  render(){
    const listItem = this.state.list.map((item, index) => {
      return (
        <ContentDiv key={ item.name } poster={ item.poster } audio={ item.music }>
          <div>
            { item.name } - { item.author }
          </div>
          <LengthDiv>
            { item.length }
          </LengthDiv>
        </ContentDiv>
      );
    });

    return (
      <div>
        { listItem }
      </div>
    )
  }
}

export default List;

코드 는 매우 간단 하지만 마지막 으로 우 리 는 이러한 문 제 를 발견 할 수 있 습 니 다.페이지 에서 생 성 된 div 요 소 는 poster 속성 만 있 고 audio 속성 은 없습니다.
 
반응 개발 자 도구 열기
 
이 때 알 수 있 듯 이 styled.div 가 원생 html 요소 로 직접 컴 파일 된 것 이 아니 라 div(물론 styled.button 이 라면 키 button 을 추가 로 생 성 합 니 다)를 생 성 합 니 다.마지막 으로 페이지 에 표 시 된 것 은 바로 이 div 입 니 다.
styled.div 에서 두 속성 이 모두 설정 되 어 있 음 을 알 수 있 습 니 다.그러나 하위 div 에 서 는 하나의 속성 만 있 습 니 다.반복 적 인 시 도 를 통 해 styled-components 구성 요소 에 속성 을 직접 설정 하면 className 을 제외 하고 하나의 속성 만 적 용 됩 니 다.
해결 하 다.
해결 방법 은 styled-components 문 서 를 몇 번 더 보면 styled-components 에 html 요 소 를 전달 하 는 다른 속성 을 지원 하 는 attr 방법 이 있 음 을 알 수 있 습 니 다.그러면 원래 list 구성 요 소 는 ContentDiv 변 수 를 수정 하면 됩 니 다.

const ContentDiv = styled.div.attrs({
 poster: props => props.poster,
 audio: props => props.audio
})`
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  transition: 0.5s;
  cursor: pointer;
  &:hover{
    color: #31c27c;
  }
`;

props 대상 은 바로 우리 가 ContentDiv 에 들 어 오 는 속성 입 니 다.그러면 마지막 으로 생 성 된 div 에서 poster 와 audio 속성 이 모두 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.