将鼠标悬停在选项元素上？

Question

我可以将鼠标悬停在选项元素上以显示更多选项吗？我想要一个下拉嵌套组件，如下图所示我有这个对象数组并将其传递给 DropDown 组件，如果第一个对象有一个名为“模块”的字段，并且它有一个由两个对象组成的数组，如何将其显示为嵌套下拉列表？index.jsimport React from "react";import ReactDOM from "react-dom";import DropDown from "./DropDown";const availableModules = [  {    text: "environment",    value: "Environment",    modules: [{ key: "greenhouse" }, { key: "protected species" }],  },  {    text: "mobility",    value: "Mobility",    modules: [      { key: "walk accessibility" },      { key: "transit accessibility" },      { key: "travel patterns" },    ],  },  {    text: "resiliency",    value: "Resiliency",    modules: [{ key: "flood" }, { key: "fire" }, { key: "earthquake" }],  },];ReactDOM.render(  <DropDown availableModules={availableModules} />,  document.getElementById("root"));Dropdown.jsconst DropDown = ({availableModules}) => {return ( <div>   <p>Select Option </p>      <select >        {availableModules.map((item, index) => (            <option                value={item.text}                key={index}            >            {item.text}            </option>        ))}     </select> </div> )}

Answer 1

是的你可以。只需渲染整个 div 结构，以及所有 UL 和 LI，并使用 css 来显示/隐藏菜单和子菜单。

不需要为此使用状态 - 通过 css 显示/隐藏并通过 css 检测悬停 - 单独的 css 就可以处理这项工作。

在所需的 LI 项目上，按正常方式添加您的点击处理程序。

<li 
    onClick={handleDoThisParticularThing}
>    This particular item
</li>

网上有很多例子。只需谷歌类似的东西create a nested menu system css