javascript - React - Prop is undefined in stateless function - Stack Overflow

admin管理员组

文章数量:1317909

I am passing props from one stateless function to another, and I get a reference error saying the prop is undefined. Here is the parent function:

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

And here is the BackgroundImage function:

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

The error is that url is undefined; however, when I console.log(props), I get an object with url and children. Any direction or explanation as to why this error is throwing would be appreciated!

I am passing props from one stateless function to another, and I get a reference error saying the prop is undefined. Here is the parent function:

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

And here is the BackgroundImage function:

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

The error is that url is undefined; however, when I console.log(props), I get an object with url and children. Any direction or explanation as to why this error is throwing would be appreciated!

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow asked Mar 14, 2018 at 0:03 Nic BonettoNic Bonetto 54311 gold badge99 silver badges2020 bronze badges 1

• Which 'url' is undefined? From my point of view the 'url' function in ${props => url(props.imageUrl)}; is undefined, not props.url. Coz url is a function in CSS rather than javascript. – brickingup Commented Mar 14, 2018 at 0:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I'm guessing you meant

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

to be

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

since the result of that function needs to be a string. Otherwise you're trying to call a function called url.

you have a scope issue. change it to:

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

basically the props are not available to your image, because styled.div is not a normal react ponent that has props.

Another way is to leave your code as is but set the background image from inside the return function:(and remove it from the styled.div)

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

本文标签： javascriptReactProp is undefined in stateless functionStack Overflow