Question

在这里反应Newbee

首先，我有一个组件DetailMovieCard.jsx，我在componentDidMount ()中插入背景图片它工作正常，但我想知道是否有其他有效的方法而不是使用 document.body.style.backgroundImage

DetailMovieCard.jsx

import React, { Component } from "react";
import { Row, Col, Glyphicon, Button } from "react-bootstrap";
import styled from "styled-components";
import { URL_IMAGE, URL_BACKGROUND } from "../const";

const Wrapper = styled.div`
  max-width: 60%;
  overflow: hidden; `;

const Image = styled.img`
  float: left;
  width: 40%;
`;

class DetailMovieCard extends Component {
    componentDidUpdate() {
        document.body.style.backgroundImage =
`url(${URL_BACKGROUND}${this.props.movie.backdrop_path})`;}

    render() {
        const {
            poster_path, original_title, backdrop_path, tagline, overview,
        } = this.props.movie;

        return (
            <Wrapper>
                <Image alt="" src={`${URL_IMAGE}${poster_path}`} />
                <div className="movie-details">
                    <h3>Title of the movie is {original_title} </h3>
                    <div>
                        <div className="movie-tagline"> {tagline} </div>
                        <div className="movie-overview">{overview} </div>
                    </div>
                </div>
            </Wrapper>
        );
    }    
}

export default DetailMovieCard;

其次，我有一个名为MovieDetails.jsx的组件，目前我正在将componentDidMount()提取的数据直接提供给<DetailMovieCard movie={this.state.movieData} >它再次运行正常但有没有更好的方法正在做？

import React, { Component } from "react";
import axios from "axios";
import { URL_DETAIL, API_KEY } from "../const";
import DetailMovieCard from './DetailMovieCard';
import Header from './Header';

class MovieDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            movieData: { movies: " " }
        };
    }

    componentDidMount() {
        const { id } = this.props.match.params;
        axios.get(`${URL_DETAIL}${id}${API_KEY}&language=en-US&page=1`)
            .then(response => {
                this.setState({ movieData: response.data });
            });}

    render() {
        return (
            <div className= "movie-container">
                <Header/>
                <DetailMovieCard movie={this.state.movieData} />
            </div>
        );
    }
}
export default MovieDetails;

Answer 1

您始终可以使用回调：

在主App组件中设置backgroundImage，没有理由使用<body>
将当前backgroundImage url保留在主App组件状态或redux store
然后，您可以使用常规的javascript回调设置backgroundImage url

componentDidMount（）async background-image

1 个答案: