javascript - React - Prop 在无状态函数中未定义

Question

我正在将 props 从一个无状态函数传递到另一个无状态函数，但我收到一个引用错误，指出该 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>
  )
}

错误是url未定义；然而，当我使用 console.log(props) 时，我得到了一个带有 url 和子对象的对象。任何关于为什么抛出此错误的指导或解释将不胜感激!

Answer 1

我猜你的意思是

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

成为

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

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