Javascript 反应：更改悬停时显示的文本

在主页上，我希望用户将鼠标悬停在一个跨度上，当他们这样做时，跨度的内容也会改变，背景也会改变

我创建了一个数组来存储数据、文本变化和背景图像。我将以src文件作为背景

我找到了这个代码片段并对其进行了改编。我对innerHTML有一个问题，因为我没有使用jQuery。我不知道在jsx中该做什么

悬停操作正在工作，我做了一个控制台日志，但它在innerHTML部分中断

该阵列由两个组件级别组成

//-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;

//-Home.js
//--Hero.js
//---heriomageitems.js（这是下面代码所在的位置）
导出类项目扩展组件{
loopHeroTitle=（）=>{
let list=this.props.hegomage.title；
标题顺序（0）；
函数标题顺序（i）{
如果（list.length>i）{
setTimeout（函数（）{
document.getElementById（“英雄图像标题”）.innerHTML=list[i]；
标题顺序（++i）；
}, 1000);
}else if（list.length==i）{
标题顺序（0）；
}
}
};
render（）{
返回(

{this.props.海洛因法师.title}

);
}
}
PropItems.propTypes={
英雄法师：需要PropTypes.object.isRequired
};
导出默认项目；

您的id不正确。 document.getElementById（“英雄图像标题”）.innerHTML=list[i]； 是设置innerHTML的位置

此p标签的id为“英雄头衔范围”

---

输入正确的id，你就可以出发了

你能为你要做的事情增加一点背景吗？什么是

标题顺序

？这清除了错误-omds谢谢，我怎么会错过那本书！现在它正在所选数组项中的字母之间循环。我想让它在不同的项目之间循环。我应该在问题中添加数组代码吗