ReactJS динамическое изменение фонового изображения не работает - PullRequest
Новая
       6

ReactJS динамическое изменение фонового изображения не работает

0 голосов
/ 22 марта 2020

Я новичок в reactJS. Я хочу создать компонент для динамического изменения фоновых изображений. Я просто пишу javascript для обновления фонового изображения каждые 5 секунд, но это не работает. Эти изображения являются локальными изображениями, я хочу l oop их и отображать их. Не могли бы вы взглянуть? Большое спасибо! 

import * as React from 'react';
import * as image from './resources';

const TIME_TICK_PERIOD = 5000;
var images =['resources/yellowstone.jpg','resources/yellowstone2.jpg','resources/yellowstone3.jpg'];

export class BackgroundImage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index:0
        };
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), TIME_TICK_PERIOD);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        let idx = this.state.index;
        if(idx >=images.length-1) {
            this.setState({
                index: 0
            });
        } else {
            this.setState({
                index: idx+1
            })
        }
    }

    render() {
        return (
            <div className="hints-on-home-screen">
                <div
                    style={{
                        position: absolute,
                        backgroundImage: `url(${images[this.state.index]}`)
                    }}
                />
            </div>
        );
    }
}

1 Ответ

0 голосов
/ 22 марта 2020

Вы сохраняете свой начальный индекс 0 вне области компонента. Таким образом, index + 1 всегда оценивается как 1. Вместо сохранения imagePath в вашем состоянии, сохраните индекс в своем состоянии. Затем увеличьте его в tick. Тогда ссылка images[index].

...