Блог

На главной странице я хочу, чтобы пользователи наводили курсор на интервал, и когда они это делают, содержимое диапазона меняется, а фон тоже меняется.

Я создал массив для хранения данных, изменения текста и фонового изображения. Я собираюсь объединить файлы src для фона.

Я нашел этот фрагмент кода и адаптировал его. У меня проблема с innerHTML, поскольку я не использую jQuery. Я не знаю, что делать в jsx.

Действие наведения работает, я записал журнал консоли, но он прерывается в части innerHTML.

Массив на 2 уровня выше по компоненту.

 //-Home.js  
//--Hero.js  
//---HeroImageItems.js (this is where the code below resides)  

export class HeroImageItems extends Component {
  loopHeroTitle = () => {
    let list = this.props.heroImage.title;
    titleSequence(0);

    function titleSequence(i) {
      if (list.length > i) {
        setTimeout(function() {
          document.getElementById("hero-image-title").innerHTML = list[i];
          titleSequence(  i);
        }, 1000);
      } else if (list.length == i) {
        titleSequence(0);
      }
    }
  };

  render() {
    return (
      <div className="hero-image-bg">
        <p
          className="hero-image-title"
          id="hero-title-span"
          onMouseOver={this.loopHeroTitle}
          style={this.getActiveText()}
        >
          {this.props.heroImage.title}
        </p>
      </div>
    );
  }
}

HeroImageItems.propTypes = {
  heroImages: PropTypes.object.isRequired
};

export default HeroImageItems;
  

У вас неверный идентификатор. document.getElementById(«герой-изображение-заголовок»).innerHTML = list[i]; это то, где вы устанавливаете innerHTML.

Этот тег p имеет идентификатор «hero-title-span»

Введите правильный идентификатор, и все будет готово!