首页 文章

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

提问于
浏览 次
2

我将道具从一个无状态函数传递给另一个，我得到一个引用错误，说道具是未定义的 . 这是父函数：

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的对象 . 任何方向或解释为什么这个错误投掷将不胜感激！

javascript reactjs ecmascript-6

2 回答

  • 1

    我猜你的意思

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

    成为

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

    因为该函数的结果需要是一个字符串 . 否则你试图调用一个名为 url 的函数 .

    回复于
  • 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>
  )
}
    回复于

相关问题