Javascript 具有相同参考的多个元素，反应

我有个问题。它是：

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={this.handleMouseEnter}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.title = node}>Text</p>
      </div>
    </li>
      );
}); 
handleMouseEnter() {
    this.title.style.opacity = "1";
}

let list=storage.map（（元素、索引、数组）=>{
返回(

{array[index]['title']}
this.title=node}>Text

);
}); 
HandleMouseCenter（）{
this.title.style.opacity=“1”；
}

所以，当鼠标进入.title包装时，我想在.title full上将不透明度设置为1。但无论鼠标进入哪个.title包装器，始终不透明度都将设置为最后一个.title full。

---

使用querySelector很容易解决这个问题，但我读到在React中使用它是件坏事，不是吗？

只是一个一般性的评论，React中通常不喜欢使用ref（有时可能用于表单或情态动词）。您正在模拟的是一种类似jQuery的DOM操作方法，这种方法当然可以工作，但它避免了React基于状态、显而易见且易于遵循的功能

我通常会

this.setState({
   hovered: true
})

---

在

handlemouse中输入
方法（并在鼠标中取消设置）。然后根据
this.state.hovered
选择您的类名，这只是React中通常不喜欢使用REF的一般注释（有时可能用于表单或情态动词）。您正在模拟的是一种类似jQuery的DOM操作方法，这种方法当然可以工作，但它避免了React基于状态、显而易见且易于遵循的功能

我通常会

this.setState({
   hovered: true
})

在
handlemouse中输入
方法（并在鼠标中取消设置）。然后根据
this.state.hovered
选择类名。之所以将
this.title
设置为最后一个元素，是因为您将循环中的每个元素设置为
this.title
，所以最后一个元素会覆盖它前面的元素，依此类推

直接使用CSS，而不是在React中处理它怎么样？
例如：

之所以总是将
this.title
设置为最后一个元素，是因为您将循环中的每个元素都设置为
this.title
，所以最后一个元素将覆盖它前面的元素，依此类推

直接使用CSS，而不是在React中处理它怎么样？
例如：

我认为使用CSS绝对是最好的方法

对于在另一个上下文中遇到多个引用问题的任何人，可以通过将引用存储在数组中来解决该问题

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={() => this.handleMouseEnter(index)}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.titles[index] = node}>Text</p>
      </div>
    </li>
  );
}); 

handleMouseEnter(index) {
  this.titles[index].style.opacity = "1";
}

let list=storage.map（（元素、索引、数组）=>{
返回(

this.handlemouseinter（index）}>
{array[index]['title']}
this.titles[index]=node}>Text

);
}); 
HandleMouseCenter（索引）{
此.titles[index].style.opacity=“1”；
}

同样，您不需要为您的用例这样做，只是认为这可能对其他人有帮助：D
我认为使用CSS绝对是最好的方法

对于在另一个上下文中遇到多个引用问题的任何人，可以通过将引用存储在数组中来解决该问题

let list = storage.map((element, index, array) => {
  return (
    <li key={index} className="list-element">
      <div className="title-wrapper" onMouseEnter={() => this.handleMouseEnter(index)}>
        <p className="title">{array[index]['title']}</p>
        <p className="title title-full" ref={node => this.titles[index] = node}>Text</p>
      </div>
    </li>
  );
}); 

handleMouseEnter(index) {
  this.titles[index].style.opacity = "1";
}

let list=storage.map（（元素、索引、数组）=>{
返回(

this.handlemouseinter（index）}>
{array[index]['title']}
this.titles[index]=node}>Text

);
}); 
HandleMouseCenter（索引）{
此.titles[index].style.opacity=“1”；
}

同样，您不需要为您的用例执行此操作，只是认为它可能对其他人有帮助：D
谢谢，我错误地认为当.title full获得不透明度1时，hover将停止工作。title wrapper谢谢，我错误地认为当.title full的不透明度为1时，hover将停止处理.title wrapper，但如果我有很多.title full元素呢？我怎样才能知道我应该在哪个具体元素上设置那个状态。但是如果我有很多。title-full元素呢？我怎样才能知道应该在哪个具体元素上设置该状态。