在 React 17 中使用设置样式组件背景图像的道具

Question

我正在学习教程：

我家：

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;`

我的部门：

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}")`};
`

它在视频中有效，但对我无效，当我检查我的元素时，我看到背景图像为：

background-image: url(/images/undefined);

注意：我是 React 新手，正在使用 React 17。

已编辑：我检查了所有道具，即标题未传递给部分

Answer 1

这样修改

<Section
    title='Top Model'
    desc='My Description'
    leftBtn='Buy'
    rightBtn='Add to Cart'
    bgImg='car.jpg'
>
</Section>

应该可行

在 React 17 中使用设置样式组件背景图像的道具

Props to set styled components background image using in React 17

javascript

css

background-image

reactjs

styled-components