目的
实现网页多语言的切换
依赖
react，rxjs，useObservable
感觉就是简单，简单，简单
实现
语言设定目录
src.png
type.ts ↓
export interface lang {
/** 欢迎语 */
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'
/** 多语言类型 */
export const lang_type$ = new BehaviorSubject<lang_type>('cn')
/** 多语言 */
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一致，就不再贴了
切换
简单的使用方法
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')即可切换英文
后记
实现起来实在是太简单了，一年前需要非常复杂的代码，今天竟如此简单
