react如何渲染下拉菜单

使用原生HTML实现基础下拉菜单

在React中可以直接使用HTML的<select>和<option>标签创建基础下拉菜单。这种方式适合静态选项列表，无需复杂交互的场景。

function BasicDropdown() {
  return (
    <select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

动态生成下拉选项

当选项需要从数据源动态生成时，可以使用数组map方法渲染选项。这种方法适合选项内容可能变化的场景。

function DynamicDropdown() {
  const options = [
    { id: 1, label: 'Red' },
    { id: 2, label: 'Blue' },
    { id: 3, label: 'Green' }
  ];

  return (
    <select>
      {options.map(option => (
        <option key={option.id} value={option.id}>
          {option.label}
        </option>
      ))}
    </select>
  );
}

受控组件实现双向绑定

使用React的state管理选中的值，实现受控组件。这种方式可以获取和设置当前选择的值，适合需要与表单其他部分联动的场景。

function ControlledDropdown() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="">Select an option</option>
      <option value="1">First</option>
      <option value="2">Second</option>
    </select>
  );
}

自定义样式下拉菜单

使用第三方库如react-select可以实现高度可定制的下拉菜单。这种方式适合需要复杂样式或功能的场景。

import Select from 'react-select';

function StyledDropdown() {
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' }
  ];

  return <Select options={options} />;
}

分组下拉选项

对于需要分类的选项，可以使用<optgroup>标签创建分组下拉菜单。这种方式适合选项有明显分类的场景。

function GroupedDropdown() {
  return (
    <select>
      <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="potato">Potato</option>
      </optgroup>
    </select>
  );
}

多选下拉菜单

使用multiple属性可以实现多选功能，或者使用react-select的多选特性。这种方式适合需要选择多个值的场景。

function MultiSelectDropdown() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleChange = (event) => {
    const options = event.target.options;
    const selected = [];
    for (let i = 0; i < options.length; i++) {
      if (options[i].selected) {
        selected.push(options[i].value);
      }
    }
    setSelectedValues(selected);
  };

  return (
    <select multiple value={selectedValues} onChange={handleChange}>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  );
}