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

Question

我可以将鼠标悬停在选项元素上以显示更多选项吗？我想要一个下拉嵌套组件，如下图所示

我有这个对象数组并将其传递给 DropDown 组件，如果第一个对象有一个名为“模块”的字段，并且它有一个由两个对象组成的数组，如何将其显示为嵌套下拉列表？

index.js

import 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.js

const 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