gpt4 book ai didi

reactjs - 从数据库而不是浏览器 i18next 获取语言环境

转载 作者:行者123 更新时间:2023-12-03 14:16:26 26 4
gpt4 key购买 nike

我目前从用户的浏览器获取区域设置。用户现在可以在其个人资料中设置他们的首选语言,该语言存储在数据库中。我想从数据库中获取此值并为 i18next 设置正确的区域设置。我在这里读到了一些有关自己的检测功能的内容:https://github.com/i18next/i18next-browser-languageDetector 。但我不完全确定这是否是正确的使用方法。我的 i18n.js 文件当前设置如下:

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';
import moment from 'moment';

export const i18nInit = (callback = () => { }) =>
// for easy overview use: https://devhints.io/moment its better than official docs:
moment.defineLocale('nl-custom', {
parentLocale: 'nl',
longDateFormat: {
LT: 'HH:mm',
LTS: 'HH:mm:ss',
L: 'D MMM', // need this format to display dates in past year(s)
LL: 'D MMMM YYYY', // need this format to display dates in the current year
LLL: 'YYYY-MM-DD HH:mm', // need this format as input for the date picker
LLLL: 'dddd D MMMM YYYY HH:mm',
},
}) &&
moment.defineLocale('en-custom', {
parentLocale: 'en',
longDateFormat: {
LT: 'HH:mm',
LTS: 'HH:mm:ss',
L: 'MMM D',
LL: 'MMMM D YYYY', // need this format to display dates in the current year
LLL: 'YYYY-MM-DD HH:mm', // need this format as input for the date picker
LLLL: 'MMMM dddd D YYYY HH:mm',
},
}) &&
i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-backend
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to the react-i18next components.
// Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
.use(reactI18nextModule)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init(
{
fallbackLng: 'en',
ns: ['actionpoints', 'common', 'menu', 'messages', 'overview', 'settings', 'shepherdTour', 'users', 'profile', 'meetingtypes'],
defaultNS: 'common',
whitelist: ['nl', 'en'],
backend: {
// Path where resources get loaded from, or a function
// returning a path:
// function(lngs, namespaces) { return customPath; }
// the returned path will interpolate lng, ns if provided like giving a static path
loadPath: '/locales/{{lng}}/{{ns}}.json',
},

load: 'currentOnly',
debug: false,

interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},

// special options for react-i18next
// learn more: https://react.i18next.com/components/i18next-instance
react: {
wait: true,
},
},
callback
);

export default i18nInit();

是否可以在此处添加一个功能,从数据库中获取语言值,如果未设置,则会回退到浏览器的区域设置?

最佳答案

i18next-browser-languageDetector 检测用户的浏览器语言,它可能与数据库中存储的值不同。

您可以对服务器进行 Api 调用来获取用户语言,如果未设置,请使用 i18next-browser-languageDetector 作为后备。

所以代码应该是这样的

export const i18nInit = async (callback = () => { }) => {
const {lang} = await axios.get('/user-lang');

const i18nConfig = i18n
.use(Backend)
.use(reactI18nextModule);

if(!lang) {
i18nConfig.use(LanguageDetector);
}

i18nConfig.init({
lng: lang || undefined // if it has value, it will use this lang, if not, it is undefined as a default value of `lng`
...
});
}

如果你想要“花哨”,你可以编写一个自定义异步语言检测器,如下所示:

module.exports = exports = function(fallback){
return {
type: 'languageDetector',
async: true,
init: () => {},
detect: async function(callback){
try {
await axios.get('user-lang')
.then(language => {
if(language){
return callback(language)
}

return callback();
})
} catch(error){
callback();
}

},
cacheUserLanguage: function(language){
// ... cache users lang
}
}
};

基于i18next-react-native-async-storage

关于reactjs - 从数据库而不是浏览器 i18next 获取语言环境,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59892851/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com