无法在反应 js 中正确使用 Refs，无法读取未定义的属性

Question

I am very new to react and js, I have a menu and submenu, I use a list to map data, I want to write a function, so onmouseover one item in the list, if it has submenu, it will show. the problem is that I can't select the submenu using ref. It is just too complicated for me, any help would be much appreciated! enter image description here

 import React, { Component } from "react"; export class Menu extends Component { constructor(props) { super(props); this.liRefs = []; } showSubmenu = (e) => { // this.liRefs.current.style.display = "block"; for (var i = 0; i < this.liRefs.length; i++) { this.liRefs[i].current.style.display = "block"; } // console.log(this.liRefs[10]); }; getStyle = (e) => { e.target.style.background = "red"; }; render() { return ( <ul className="mainmenu"> {this.props.items.map((i) => i.subitems? ( <li key={i.id} onMouseOver={this.showSubmenu}> {i.icon} {i.name} <ul key={i.id} ref={(ref) => (this.liRefs[i.id] = ref)}> {i.subitems.map((item) => ( <div key={item.id} className="submenu"> {item.icon} {item.name} </div> ))} </ul> </li> ): ( <li key={i.id}> {i.icon} {i.name} {i.img} </li> ) )} </ul> ); } } export default Menu;

Answer 1

You are giving ref value to this. liRefs[i.id] this. liRefs[i.id] and accessing through this. liRefs[i] this. liRefs[i] so that both are the different change your code as below:

{this.props.items.map((i,index) =>
          i.subitems ? (
            <li key={i.id} onMouseOver={this.showSubmenu}>
              {i.icon}
              {i.name}
              <ul key={i.id} ref={(ref) => (this.liRefs[i.id] = ref)}>
                {i.subitems.map((item) => (
                  <div key={item.id} className="submenu">
                    {item.icon}
                    {item.name}
                  </div>
                ))}
              </ul>
            </li>
          ) : (
            <li key={i.id}>
              {i.icon}
              {i.name}
              {i.img}
            </li>
          )
        )}