React Dropdown组件重构：切换GoChevron图标遇空白页问题

一、修复页面空白问题 #

你的组件出现空白，主要有两个关键问题：

1. Tailwind类名拼写错误：hover:g-sky-100 是无效类名，正确应为 hover:bg-sky-100，虽然该错误不会直接导致空白，但会影响交互反馈效果。
2. 未处理options参数缺失情况：如果父组件未正确传递options，options.map会触发报错，导致组件无法渲染。需给options设置默认空数组，避免报错。

二、实现图标切换功能 #

要实现点击时切换GoChevronDown和GoChevronLeft，只需导入GoChevronLeft，再根据isOpen状态条件渲染对应图标即可。

修复后的完整代码 #

import { useState } from "react";
import { GoChevronDown, GoChevronLeft } from "react-icons/go";

function Dropdown({ options = [], value, onChange }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setIsOpen(!isOpen);
  };

  const handleOptionClick = (option) => {
    setIsOpen(false);
    onChange(option);
  };

  const renderedOptions = options.map((option) => {
    return (
      <div
        className='hover:bg-sky-100 rounded cursor-pointer p-1'
        onClick={() => handleOptionClick(option)}
        key={option.value}
      >
        {option.label}
      </div>
    );
  });

  return (
    <div className='w-48 relative'>
      <div
        className='flex justify-between items-center cursor-pointer border rounded p-2 shadow bg-white w-full'
        onClick={handleClick}
      >
        {value?.label || "Select..."} 
        {/* 根据展开状态切换图标 */}
        {isOpen ? <GoChevronLeft className='text-3xl' /> : <GoChevronDown className='text-3xl' />}
      </div>
      {isOpen && (
        <div className='absolute top-full border rounded p-3 shadow bg-white w-full'>
          {renderedOptions}
        </div>
      )}
    </div>
  );
}

export default Dropdown;

额外注意事项 #

• 确认父组件传递的options格式正确，示例格式为：[{label: 'red', value: 'red'}, {label: 'green', value: 'green'}, {label: 'blue', value: 'blue'}]
• 父组件需正确实现onChange函数，接收选中的选项值完成状态更新

内容的提问来源于stack exchange，提问作者Daniel