Question

我正在尝试使用movieDB学习React。每次用户搜索电影时，背景图像都应该更新。但是，它声明我有一个意外的令牌。我在这里错过了什么？

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 ...

是的，整个块应该进入渲染方法

Answer 2

我明白了。一个帮助不批评的社区...

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

内联动态更改背景图像React

2 个答案: