Javascript 使用单击处理程序构建动态菜单

我很难找到这个代码中的问题。。。我试图建立一个水平菜单，当点击时会展开，用户可以点击他们想要的选项。要关闭展开的菜单，他们可以单击左侧的“X”

我问了一个以前的问题，做了一些修改，但不知道从这里该怎么办

我的主要问题是：

• 如何从

  buildLanguageSelector

  添加动态创建的列表元素

• 如何将单击处理程序添加到

  菜单

  和

  x

  中，以便它们在单击时切换？现在，传递到单击处理程序中的

  此

  为

  null

  const language选择器=（道具）=>{
  const{languages，onSelectLanguage}=props
  const listContainer=document.createElement（'ul'）
  listContainer.style.position='absolute'
  listContainer.style.top='0'
  const buildLanguageSelector=（）=>{
  if（props.ui.languages.length）{
  […props.ui.languages].forEach（函数（语言，i）{
  const el=document.createElement（'li'）
  el.value=language.languageCode
  el.innerHTML=language.name
  el.className=“项目”
  el.addEventListener（“点击”，函数（e）{
  e、 停止传播（）
  })
  listContainer.appendChild（el）
  })
  }否则{
  }
  }
  buildLanguageSelector（）
  常量openMenu=（e）=>{
  控制台日志（e）
  e、 parentElement.classList.add（'open'）
  }
  const closeMenu=（e）=>{
  e、 parentElement.classList.remove（'open'）
  }
  返回(
  //正在传递到“openMenu”和“closeMenu”的“this”为空
  菜单
  ✕
  //我知道这一部分是不正确的，但是我不知道怎么做
  //从buildLanguageSelector插入动态创建的li
  {listContainer}
  )
  }
  

  正文{
  背景：白色；
  }
  .菜单{
  背景：白色；
  边界半径：17px；
  高度：34px；
  宽度：100px；
  显示器：flex；
  弯曲方向：行；
  证明内容：中心；
  对齐项目：居中；
  光标：指针；
  }
  .菜单.项目{
  显示：无；
  颜色：灰色；
  }
  .菜单#打开按钮{
  显示：块；
  }
  .菜单#关闭按钮{
  显示：无；
  颜色：灰色；
  }
  .菜单.打开{
  证明内容：周围的空间；
  宽度：300px；
  }
  .菜单.打开.项目{
  显示：块；
  }
  .菜单.打开.项目：悬停{
  颜色：黑色；
  }
  .菜单.打开.关闭按钮{
  显示：块；
  }
  .菜单.打开.关闭按钮：悬停{
  颜色：黑色；
  }
  .菜单.打开.打开按钮{
  显示：无；
  }

  更新：添加了示例菜单实现
  我意识到在风格上这不是你想要的，但在概念上这是我认为你想要的方向：

  const语言=[
  “英语”，
  “西班牙语”，
  “法语”，
  “伍基”，
  “克林贡”
  ]
  功能菜单（）{
  //跟踪菜单是否打开
  常量[isOpen，setOpen]=React.useState（false）；
  //在一个真正的应用程序中，这将通知感兴趣的用户
  //双方（重新调度或其他方式）
  const[selectedLanguage，setLanguage]=React.useState（语言[0]）；
  //设置语言的便捷功能
  //然后关闭菜单
  const onLangSelect=语言=>{
  语言；
  setOpen（假）；
  };
  返回(
  setOpen（！isOpen）}>{selectedLanguage}v
  
  {
  //如果菜单处于打开状态，请渲染项目…
  等参(
  //通过迭代可用的语言并为每种语言发送一个项。
  //item.onClick调用onLangSelect，传入所选语言
  //我们还在这里用css类标记当前项
  languages.map（lang=>(
  onLangSelect（lang）}key={lang}>
  {lang}
  
  ))			
  )
  }
  
  )
  }
  ReactDOM.render（，document.querySelector（#app））

  正文{
  背景：#20262E；
  填充：20px；
  字体系列：Helvetica；
  }
  #应用程序{
  背景：#fff；
  边界半径：4px；
  填充：20px；
  过渡：均为0.2s；
  }
  .语言菜单{
  位置：绝对位置；
  背景：白色；
  字体大小：0.875rem；
  最小宽度：150px；
  填充：0；
  保证金：0；
  列表样式：无；
  }
  .语言菜单李{
  填充：1em；
  }
  .语言菜单li:悬停{
  背景：浅蓝色；
  }
  李先生当选{
  背景：bisque；
  }

  感谢您的回复。我有几个问题。这不是一个类组件，只是一个功能组件。那么，如果不在渲染中，我将把动态创建li的代码放在哪里呢？或者（我对react知识的缺乏可能会在这里表现出来），我应该把它作为一个类组件吗？这将在主类组件中呈现，据我所知，当在类组件中呈现组件时，它应该是功能性的。另外-如果使用redux，setState部分如何更改？这可能更像是一个设计问题。我应该在全局状态下设置打开/关闭吗？您可以使用like在功能组件中完成所有操作。如果需要，动态创建的
  元素可以直接在渲染中发出，也可以使用函数返回它们。菜单的状态（打开/关闭）应该在组件本身中隔离，因为这是唯一与之相关的事情。这是组件的状态，而不是应用程序的状态。我将用一个更全面的例子更新我的答案。