Стиль фонового изображения не применяется с setInterval в React.js - PullRequest
Новая
       28

Стиль фонового изображения не применяется с setInterval в React.js

0 голосов
/ 19 февраля 2019

Используя AJAX-запрос, я пытаюсь изменить фоновое изображение и установить его свойства стиля.В функции, которая вызывается каждые несколько секунд через метод setInterval, я определяю стиль и устанавливаю состояния компонента следующим образом: 

changeThings() {
    let maxVal = this.props.data.length;
    let ranNum = Math.floor((Math.random() * maxVal));

    let imgVal = (this.props.url[ranNum])? 'url('+ this.props.url[ranNum].url+')':null;
    
    let style = {
      background:imgVal,
      backgroundSize:'cover',
      backgroundPosition:'center',
      bacgkrouhndRepeat:'no-repeate'
    };
    
    this.setState({content:{style:style,
                            section:section,
                            title:title,
                            by:author,
                            dateInfo:updatedDate}});
  }
  
  render()  {
    return ({
      <div>
        //...other components
         (this.state.content.style)? 
          <div id="image" style={this.state.content.style}>:null
        //...other components
      </div>
    })
  }

Самое первое изображение отображается при каждом применении свойств css к фоновому изображению.Однако из вторых изображений изменяются только изображения (фон: значение URL), но не другие свойства фонового изображения, такие как положение, повтор, размер и т. Д.

В чем причина этих проблем и как их решить?

1 Ответ

0 голосов
/ 19 февраля 2019

Вот как я исправил проблему.Сначала я сохранял только данные строки URL в this.state.content, а не весь стиль CSS.Это сработало, когда я установил свойство стиля непосредственно в JSX.

Кроме того, в основном, когда DOM определяет значение для свойства стиля background-size, оно вычисляет значение на основе текущего значения «снимка» высоты элементаи ширина, где изображение будет отображаться.В настоящее время я делаю адаптивное веб-приложение, поэтому я подумал, что стиль css не работает, когда я изменил представление.

...