インラインで動的に背景イメージを変更する反応

Question

movieDBを使用してリアクションを学ぼうとしています。ユーザーが映画を検索するたびに、背景イメージが更新されるはずです。しかし、予期せぬトークンがあることを示しています。私はここで何が欠けていますか？

class Movie extends Component { 

var styles = { 
    var imgURL = 'https://image.tmdb.org/t/p/' + this.props.movie.poster_path; 
    backgroundImage: 'url(' + imgUrl + ')', 
    backgroundPosition: "center", 
    backgroundSize: "cover" 
} 

render() { 
    return (
     <div className="Movie" style={styles}> 
      <div> 
       <img src={'https://image.tmdb.org/t/p/w500/' + this.props.movie.poster_path} /> 
      </div> 
      <strong>{this.props.movie.tagline}</strong> 
      <h3>{this.props.movie.title}</h3> 
      <p>{this.props.movie.overview}</p> 
     </div> 
    ); 
} 

}オブジェクト定義内の

Answer 1

var imgUrl ...

そして、ええブロック全体は、私はそれを考え出したrenderメソッド

Answer 2

の内側に行く必要があります。 批判しないためのコミュニティ...

var styles = { 
     backgroundImage: `url(https://image.tmdb.org/t/p/w500/${this.props.movie.poster_path})`, 
     backgroundPosition: "center", 
     backgroundSize: "cover" 
    }