Javascript 尝试在ReactJS中按ID设置元素样式时出错

所以我的反应有问题。我正在尝试用JavaScript制作简单的下拉列表（无需编写CSS示例来制作下拉列表。我需要js格式的下拉列表，因为这样会有延迟）

我的代码是：

import React, {Component} from 'react';

class Header extends Component {
 constructor(props) {
  super(props);
  this.dropdown = React.createRef();
 }

 handleMouseOver = e => {
  e.preventDefault();
  this.dropdown.current.id.style.display = 'block';
 };

 render() {
  return (
   <header id="header">
     <div onMouseOver={e => this.handleMouseOver(e)}>
       <ul>
         <li className="dropdown">Categories</li>
         <ul id="menu" className="sub-menu" ref={this.dropdown}>
           <li>Computerss & Office</li>
         </ul>
       </ul>
     </div>
   </header>
  )
 }
}
export default Header;

和

this.dropdown.current.id.style.display = 'block';

我想让下拉菜单出现。但是，当鼠标移到div上时，我得到一个错误：

未捕获类型错误：无法设置未定义的属性“display”

有趣的是，当我尝试

console.log(this.dropdown.current.id);
alert(this.dropdown.current.id);

我得到输出：

菜单

当我只使用js在js函数中传递变量并执行

document.getElementById（elementId）.style.display=“block”时，情况完全相同但我当然可以提醒它或
控制台。log

但当我通过在js函数中写入来插入ID时，它可以完美地工作：

document.getElementById('menu').style.display = "block";

因此，在尝试传递
ID
时出现问题。有什么线索可以解释为什么会发生这种情况吗？
在构造函数中，您需要将此

绑定到事件处理程序

constructor() {
    super(props);
    this.dropdown = React.createRef();
    this.handleMouseOver = this.handleMouseOver.bind(this);
}

您还可以将事件引用简化为：

<div onMouseOver={this.handleMouseOver}>

然后，在悬停事件处理程序中，可以将此

ishover

值设置为true

有了这个选项，您的渲染方法只能在

isHovering

值为true时渲染列表：

<div onMouseOver={e => this.handleMouseOver(e)}>
   <ul>
     <li className="dropdown">Categories</li>
     {this.state.isHovering?(
         <ul id="menu" className="sub-menu">
             <li>Computerss & Office</li>
         </ul>
     ):null}
   </ul>
 </div>

this.handleMouseOver（e）}>

类别
{this.state.isHovering(

计算机与办公室

)：null}

您应该使用className作为元素中的样式。如果this.dropdown.current是元素，.id是元素上的字符串属性，那么this.dropdown.current.style是与元素关联的样式属性。您可以尝试使用

this.dropdown.style.display='block'而不是从id中获取菜单，因为它只返回字符串数据，而不能从字符串数据中获取样式。也许你们有办法在其他下拉列表中重复相同的代码，否则就不干了，我需要多次编写相同的代码。我是新来的，但仍然不知道所有的可能性。感谢您可以将下拉结构移动到一个新的React组件中，然后从
标题
组件内部使用它，例如：

this.state = {
    isHovering: false
}

<div onMouseOver={e => this.handleMouseOver(e)}>
   <ul>
     <li className="dropdown">Categories</li>
     {this.state.isHovering?(
         <ul id="menu" className="sub-menu">
             <li>Computerss & Office</li>
         </ul>
     ):null}
   </ul>
 </div>