React-属性在无状态函数中未定义

Question

我正在将道具从一个无状态函数传递到另一个无状态函数，并且收到一个引用错误，指出该道具未定义。这是父函数：

const Home = () => {
  return (
    <App>
      <BackgroundImage url="mercedes-car.jpg">
        <h1>Test</h1>
      </BackgroundImage>
    </App>
  )
}

这是BackgroundImage函数：

const Image = styled.div`
  background-image: ${props => url(props.imageUrl)};
  background-size: cover;
  height: 100%;
  width: 100%;
`;

const BackgroundImage = (props) => {
    console.log(props)
  return (
    <Image imageUrl={ props.url }>
      { props.children }
    </Image>
  )
}

错误是网址未定义；但是，当我console.log（props）时，我得到一个带有url和子级的对象。为什么会引发此错误的任何方向或解释将不胜感激！

Answer 1

我猜你的意思是

background-image: ${props => url(props.imageUrl)};

成为

background-image: url(${props => props.imageUrl});

因为该函数的结果需要是一个字符串。否则，您将尝试调用名为 的函数url。