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

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

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和子级的对象。关于为什么会引发此错误的任何方向或解释，将不胜感激!

最佳答案

我猜你的意思是

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

成为

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

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

关于javascript - react -属性在无状态函数中未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49267804/