스타일 부품을 사용하여 반응 부품의 소품을 사용하십시오.

Question

저는 반응하는 js 프로젝트에서 스타일이 적용된 부품을 사용하고 있습니다. 내 스타일의 구성 요소 img을 구성 할 때 배경이 구성 요소가 가져 오는 소품에 의존하기를 원합니다. 내가 기능적 구성 요소를 짓고 있어요 경우 그냥 사용 : 구성 요소 내부

const FramedImage = styled.img` 
    background-size: cover; 
    background: URL(${props.imageUrl}); 
    background-position: center center; 
    background-repeat: no-repeat;`; 

과 작동합니다. 클래스 구성 요소를 사용하여 어떻게 동일한 결과를 얻을 수 있습니까? 클래스 자체 안에 const var을 선언 할 수 없기 때문에 아무 것도 없습니다 this.props

고마워요!

Answer 1

구성 요소 범위 외부에서 정의 된 경우 소품에 액세스하려면 함수를 전달해야합니다. 따라서 귀하의 경우 다음 CSS 템플릿 함수를 발견 styled-components

const FramedImage = styled.img` 
    background-size: cover; 
    background: URL(${props => props.imageUrl}); //use a function here instead 
    background-position: center center; 
    background-repeat: no-repeat; 
`; 

, 그것은 구성 요소에 할당 된 소품으로 전화 할게.

이 비록 기억은 FramedImage 구성 요소에 할당 소품을 의미한다, 그래서 당신이 부모 구성 요소의에서 소품에 전달하려면, 당신은 등을 확산해야합니다

class Parent extends React.Component { 
    render() { 
    return <FramedImage {...this.props} 
    } 
}