目的
實(shí)現(xiàn)網(wǎng)頁(yè)多語(yǔ)言的切換
依賴(lài)
react糯累，rxjs截亦，useObservable
感覺(jué)就是簡(jiǎn)單辨图，簡(jiǎn)單蒂破，簡(jiǎn)單
實(shí)現(xiàn)
語(yǔ)言設(shè)定目錄
src.png
type.ts ↓
export interface lang {
/** 歡迎語(yǔ) */
hello: string
}
export type lang_type = 'en' | 'cn'
index.ts ↓
import { cn } from './cn'
import { en } from './en'
import { BehaviorSubject } from 'rxjs'
import { map } from 'rxjs/operators'
import { lang_type } from './type'
/** 多語(yǔ)言類(lèi)型 */
export const lang_type$ = new BehaviorSubject<lang_type>('cn')
/** 多語(yǔ)言 */
export const lang$ = lang_type$.pipe(
map((t) => {
switch (t) {
case 'en':
return en
default:
return cn
}
}),
)
cn.ts ↓
import { lang } from './type'
export const cn: lang = {
hello: '歡迎',
}
en.ts一致，就不再貼了
切換
簡(jiǎn)單的使用方法
import { lang$, lang_type$ } from '@/i18n'
export default function Index() {
const l = useObservable(() => lang$)
return <div className={s.Index}>{l?.hello}</div>
}
在任意位置lang$.next('en')即可切換英文
后記
實(shí)現(xiàn)起來(lái)實(shí)在是太簡(jiǎn)單了芬失，一年前需要非常復(fù)雜的代碼楣黍，今天竟如此簡(jiǎn)單
