[英]Props to set styled components background image using in React 17
I am following a tutorial:我正在学习一个教程:
My home:我的家:
function LandingPage (){
return(
<Container>
<Section>
title='Top Model'
desc='My Description'
leftBtn='Buy'
rightBtn='Add to Cart'
bgImg='car.jpg'
</Section>
</Container>
)
}
export default LandingPage;
const Container = styled.div`
height: 100vh;`
My Section:我的部分:
function Section ({title, desc, leftBtn, rightBtn, bgImg}){
return (
<Wrap bg={bgImg}></Wrap>
)
}
export default Section;
const Wrap = styled.div`
background-image: ${props => `url("/images/${props.bg}")`};
`
It's working in Video but not for me, When I inspect my elements I see background image as:它在视频中工作但不适合我,当我检查我的元素时,我看到的背景图像为:
background-image: url(/images/undefined);背景图片:网址(/图片/未定义);
Note: I am new to react and using react 17.注意:我是反应和使用反应 17 的新手。
Edited: I've checked all props ie, title are not passing to Section编辑:我检查了所有道具,即标题没有传递给节
modify it like that像这样修改它
<Section
title='Top Model'
desc='My Description'
leftBtn='Buy'
rightBtn='Add to Cart'
bgImg='car.jpg'
>
</Section>
that should work那应该工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.