React styled-components 구성 요소 속성 설정 방법
3340 단어 Reactstyled-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 속성 이 모두 있 습 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.