您好,登錄后才能下訂單哦!
要在React中實現多語言國際化功能,你可以使用第三方庫如react-i18next。以下是一個簡單的示例:
npm install react-i18next i18next
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
.use(initReactI18next)
.init({
resources: {
en: {
translation: {
greeting: 'Hello',
welcome: 'Welcome'
}
},
fr: {
translation: {
greeting: 'Bonjour',
welcome: 'Bienvenue'
}
}
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
export default i18n;
import React from 'react';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
function App() {
return (
<I18nextProvider i18n={i18n}>
// Your app components here
</I18nextProvider>
);
}
export default App;
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('greeting')}</h1>
<p>{t('welcome')}</p>
</div>
);
}
export default MyComponent;
import React from 'react';
import { useTranslation } from 'react-i18next';
function LanguageSwitcher() {
const { i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
return (
<div>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('fr')}>French</button>
</div>
);
}
export default LanguageSwitcher;
通過這種方式,你可以在React應用中實現多語言國際化功能。你可以根據需要添加更多的語言和翻譯文本。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。