带有 React 和 Next 的语言切换器

Question

我想在语言之间切换的想法是点击标志（点击时，标志会随着语言的变化而变化）。到目前为止我做得很好，标志正在切换，url 路径也在切换，但我无法在翻译之间切换。

为了处理 url，我正在使用内置的 Next 选项 i18n，对于实际的语言翻译，我正在使用 react-i18next。

我的 i18next 文件非常简单：

i18n.use(LanguageDetector)
    .use(initReactI18next)
    .init({
        resources: {
            en: {
                translation: translations_EN_homePage,
            },
            da: {
                translation: translations_DA_homePage,
            },},});

更改语言挂钩和 handleOnclick 函数：

const [language, setLanguage] = useState('en');

const handleOnclick = (e) => {
    e.preventDefault();
    setLanguage(e.target.value);
    i18n.changeLanguage(e.target.value);
};

最后解决了我的按钮 = flag

                    <button
                        value={language === 'en' ? 'da' : 'en'}
                        onClick={() => {
                            const locale = router.locale === 'en' ? 'da' : 'en';
                            setCookie(locale);
                            {handleOnclick}
                            router.push(
                                `/${locale}`,
                                `/${locale}`,
                                {locale: false,}}} >
                        {router.locale === 'en' ? (
                            <img
                                src={menuItems.data.body[5].items[0].image.url}/>
                        ) : (
                            <img src={menuItems.data.body[4].items[0].image.url} />
                        )}
                    </button>

为什么 handleOnclick 函数不起作用？当我只使用 2 个按钮进行测试时，翻译工作完全正常，那么冲突在哪里？

工作 handleOnclick 函数的示例，我不想使用它：

               <button value="da" onClick={handleOnclick}>
                    Danish
                </button>
                <button value="en" onClick={handleOnclick}>
                    English
                </button>

Answer 1

您实际上并不是在呼叫 handleOnclick。你只有 {handleOnclick} 什么都不做。您需要调用该函数。为此，您的 onClick 回调必须接受事件 e，以便它可以将其传递给 handleOnclick。您还缺少 router.push.

的结尾括号 )

这应该有效：

<button
    value={language === 'en' ? 'da' : 'en'}
    onClick={(e) => {
        const locale = router.locale === 'en' ? 'da' : 'en';
        setCookie(locale);
        handleOnclick(e);
        router.push(
            `/${locale}`,
            `/${locale}`,
            { locale: false, }
        );
    }}
>
    {router.locale === 'en' ? (
        <img src={menuItems.data.body[5].items[0].image.url} />
    ) : (
        <img src={menuItems.data.body[4].items[0].image.url} />
    )}
</button>

但是将一些逻辑内联而另一些放在单独的函数中是很奇怪的。我会一起移动它。

您不需要使用 e.target.value，因为 value 派生自 language。看来您只是在两个选项之间切换。

e.preventDefault 在这里也不是真正需要的，因为单击按钮没有我们需要以 link 单击或表单提交的方式阻止的默认事件。

我不熟悉 react-i18next 包，所以我不知道你的 i18n 或 router 变量的类型。似乎我们甚至不需要此组件中的 language 状态，因为您正在从 router.locale.

获取语言

const language = router.locale ?? 'en';

const handleOnclick = () => {
    const newLang = language === 'en' ? 'da' : 'en';
    i18n.changeLanguage(newLang);
    setCookie(newLang);
    router.push( // is this correct?
        `/${newLang}`,
        `/${newLang}`,
        { locale: false, }
    );
};

return (
    <button
        onClick={handleOnclick}
    >
        {language === 'en' ? ( // you could combine some logic here
            <img src={menuItems.data.body[5].items[0].image.url} />
        ) : (
            <img src={menuItems.data.body[4].items[0].image.url} />
        )}
    </button>
)

带有 React 和 Next 的语言切换器

Language Switcher with React and Next

internationalization

typescript

i18next

reactjs

react-i18next