Install

1pnpm install translator-client

API

t

react 上下文中的翻译方法

1declare function t(s: string, { id }?: { id: string }): string;

支持动态文案，例如

1t(`共计<${var}>`)

其中动态的部分会被替换为 holder1 并作为 id 使用

如果确需 <> 字符，则可使用转义符，例如

1t(`文案/<文案/>`);

在渲染时转义符会被自动去除

xml

1t('共计<span>特殊</span><page>页', {
2    span: children => (
3        <span key="span" style={{ color: 'red' }}>
4            {children}
5        </span>
6    ),
7});

1// 支持闭合标签
2t('前<input/>%', {
3    input: () => {
4        return <input key="input" />;
5    },
6});

1// 支持标签嵌套
2t('共计<span>特殊<strong>标签</strong><input/></span><page>页', {
3    span: children => (
4        <span key="span" style={{ color: 'red' }}>
5            {children}
6        </span>
7    ),
8    strong: children => <strong key="strong">{children}</strong>,
9    input: () => {
10        return <input key="input" />;
11    },
12});

当 xml 替换函数返回 字符串时，t 函数也会尽量返回字符串

1expect(
2    t('共计<span>特殊</span><page>页', {
3        span: c => `<span style='color:red'>${c}</span>`,
4    }),
5).toBe("共计<span style='color:red'>特殊</span>page页");

更多用例请查看

Translate

react 上下文外 (常量声明) 的翻译组件

1declare function Translate({ text, id }: TranslatePropsType): JSX.Element;

setLanguage

切换语言的方法

1type SupportLanguagesType = 'zh' | 'en';
2
3declare const setLang: (lang: SupportLanguagesType) => void;

setLocales

设置翻译包

1export declare const supportLanguages: readonly ['zh', 'en'];
2export declare type SupportLanguagesType = typeof supportLanguages[number];
3export declare type LocalesItemType = Record<SupportLanguagesType, string>;
4export declare type LocalesType = Record<string, LocalesItemType>;
5
6export declare const setLocales: (nextLocales: LocalesType) => void;

强绑定的文案和t

为了能收集到所有的文案，所以牺牲了写法的灵活性，强行绑定文案和 t

例如：

错误的写法

1function Page() {
2    const text = isReal ? '文案1' : '文案2';
3    return t(text);
4}

正确写法

1function Page() {
2    const text = isReal ? t('文案1') : t('文案2');
3    return text;
4}

开发

• 使用 pnpm link 到全局，然后在项目中 link 下来
• 运行 pnpm run build:watch