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>
  )
}

错误是url未定义;但是，当我在console.log（props）时，我得到一个带有url和children的对象。任何指示或解释为什么抛出这个错误都将不胜感激！

Answer 1

你有一个范围问题。将其更改为：

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

  return (
    <Image>
      { props.children }
    </Image>
  )
}

基本上道具不适用于您的图像，因为styled.div不是具有道具的普通反应组件。

另一种方法是保持代码不变，但是在return函数中设置背景图像:(并从styled.div中删除它）

  return (
    <Image style={{backgroundImage: `url(${props.url})`}}>
      { props.children }
    </Image>
  )
}

Answer 2

我猜你的意思

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

是

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

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

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

2 个答案: