目的

实现网页多语言的切换

依赖

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')即可切换英文

后记

实现起来实在是太简单了，一年前需要非常复杂的代码，今天竟如此简单