将当前语言环境设置为选定的语法错误

Question

我正在 Next.js 中创建一个语言切换器。它工作正常，但我希望默认选择当前语言。因此，我正在这样做。

import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();

  return (
    <div className="form-select-wrapper mb-4">
      <select className="form-select" onChange={(e) =>
          router.push(
            {
              pathname: router.pathname,
              query: router.query,
            },
            null,
            { locale: e.target.value }
          )
        }
      >
        <option value='en' {router.locale === 'en' ? 'selected' : ''}>English</option>
        <option value='fr'>Français</option>
        <option value='hi'>हिंदी</option>
      </select>
    </div>
  );
}

显示语法错误，请帮忙。

请帮忙

Answer 1

我在您的代码中看到了问题。在 JSX 中，您应该使用不带等号的选定属性来根据条件有条件地应用它。这是更正后的代码：

<option value='en' selected={router.locale === 'en'}>English</option>
<option value='fr' selected={router.locale === 'fr'}>Français</option>
<option value='hi' selected={router.locale === 'hi'}>हिंदी</option>

在 JSX 中，像 selected 这样的布尔属性应该具有 true 值来包含它们，或者省略它们以排除它们。这样，仅当条件（router.locale === 'en' 等）为 true 时，才会添加 selected 属性。