React-Select语言选择组件国旗左侧异常问题求助

问题原因 #

1. 默认选中指示器干扰：React-Select在选项选中状态下会默认渲染勾选图标，自定义label时该图标会显示在国旗左侧，造成视觉异常。
2. 组件高度设置错误：customStyles的control中设置height: 1会导致组件布局塌陷，加剧视觉错乱。
3. 路径切换逻辑bug：原代码中currentLocale === i18nConfig.defaultLocale && !i18nConfig.defaultLocale的条件永远无法触发，导致默认locale的路径切换失效。

解决方案 #

• 隐藏默认选中指示器
• 修正组件高度为合理值
• 修复路径切换逻辑

修改后的完整代码 #

'use client';

import { useRouter } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import i18nConfig from '../../../../i18nConfig';
import Select, { SingleValue } from 'react-select';
import Flag from 'react-world-flags';

const languages = [
    { code: 'en', name: 'English', flag: 'GB' },
    { code: 'ru', name: 'Русский', flag: 'RU' },
    { code: 'kk-KZ', name: 'Қазақша', flag: 'KZ' },
];

type LanguageOption = {
    value: string;
    label: JSX.Element;
};

export default function LanguageChanger() {
    const { i18n } = useTranslation();
    const currentLocale = i18n.language;
    const router = useRouter();
    const currentPathname = usePathname();

    const handleChange = (selectedOption: SingleValue<LanguageOption>) => {
        if (!selectedOption) return;
        const newLocale = selectedOption.value;

        // 设置cookie用于next-i18n-router
        const days = 30;
        const date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        const expires = date.toUTCString();
        document.cookie = `NEXT_LOCALE=${newLocale};expires=${expires};path=/`;

        // 修正路径切换逻辑
        let newPath = '';
        if (i18nConfig.defaultLocale === currentLocale) {
            // 当前是默认locale，路径无前缀，切换时添加新locale前缀
            newPath = `/${newLocale}${currentPathname}`;
        } else if (i18nConfig.defaultLocale === newLocale) {
            // 切换到默认locale，移除当前locale前缀
            newPath = currentPathname.replace(`/${currentLocale}`, '');
        } else {
            // 非默认locale之间切换，替换前缀
            newPath = currentPathname.replace(`/${currentLocale}`, `/${newLocale}`);
        }

        router.push(newPath);
        router.refresh();
    };

    const customStyles = {
        control: (provided: any) => ({
            ...provided,
            width: 200,
            // 修正高度为合理值，避免布局塌陷
            height: 32,
            backgroundColor: 'transparent',
            cursor: 'pointer',
            webkitUserSelect: 'none',
            msUserSelect: 'none',
            userSelect: 'none',
            border: '1px solid #ddd',
        }),
        option: (provided: any, { isFocused, isSelected }: { isFocused: boolean; isSelected: boolean }) => ({
            ...provided,
            backgroundColor: isFocused ? '#e0e0e0' : isSelected ? '#d0d0d0' : '#fff',
            display: 'flex',
            alignItems: 'center',
            // 隐藏默认的选中指示器
            '&:before': {
                display: 'none',
            },
        }),
        singleValue: (provided: any) => ({
            ...provided,
            display: 'flex',
            alignItems: 'center',
        }),
    };

    const options = languages.map(lang => ({
        value: lang.code,
        label: (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <Flag code={lang.flag} style={{ width: '20px', height: '15px' }} />
                {lang.name}
            </div>
        ),
    }));

    return (
        <Select
            defaultValue={options.find(option => option.value === currentLocale)}
            onChange={handleChange}
            options={options}
            styles={customStyles}
            hideSelectedOptions={false}
        />
    );
}

关键修改说明 #

1. 在option样式中通过&:before隐藏默认选中指示器，解决国旗左侧异常元素问题
2. 将control的height改为32px（可按需调整），修复布局塌陷
3. 重构路径切换逻辑，确保默认locale与非默认locale之间的路径跳转正确
4. 使用gap替代marginRight控制国旗与文字的间距，优化布局规范

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