带有 React 和 Next 的语言切换器

Question

我在语言之间切换的想法是单击标志（单击时，标志会随着语言发生变化）。到目前为止我做得很好，flag和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);
};

最后解决我的按钮 = 标志

                    <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 在这里也不是真正需要的，因为按钮单击没有我们需要像链接单击或表单提交那样阻止的默认事件。

我不熟悉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>
)