react封装一个下拉菜单

在React中，创建一个简单的下拉菜单通常涉及到以下几个步骤：

1. 定义组件结构：首先，你可以创建一个名为`DropdownMenu`的React组件，它包含两个主要部分：一个显示当前选项的`Select`元素（比如`<select>`），以及一个可点击的按钮或链接来展开或关闭下拉列表。

import React, { useState } from 'react';

const Dropdown = ({ options, defaultOption }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(defaultOption);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '关闭' : '展开'}
      </button>
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <li key={index} onClick={() => setSelectedOption(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

2. `options` 和 `defaultOption` 是 props，用于传递下拉菜单的选项及其默认值。

3. 使用状态管理（如useState）控制下拉框的打开和关闭状态，以及选中的选项。

4. 当用户点击“展开”按钮时，`isOpen` 状态会切换，同时当点击列表项时，`setSelectedOption` 会被调用，更新选中的选项。

5. 如果需要更复杂的样式和功能，可以引入外部库，如 Ant Design 的 `<Select>` 组件，它已经封装了下拉菜单的所有常见特性。

import { Select } from 'antd';

const DropdownWithAntd = ({ options, defaultOption }) => {
  // 使用Antd Select组件...
};

export default DropdownWithAntd;