核心概念

18ways 对一些事情有明确的看法。一旦这些清楚了，API 的其余部分就很简单了。

基础区域

您的 baseLocale 是您所使用的语言。

如果您的产品文案是用英式英语撰写的，则您的基础区域设置为 en-GB。如果是用美式英语撰写的，则您的基础区域设置为 en-US。

当当前区域设置与基础区域设置匹配时，18ways 会立即返回源文本并跳过翻译工作。

目标区域

您的目标区域是用户当前正在阅读的语言。

在 React 中，您通常将其保存在状态中，并将其传递给根 Ways。

上下文

上下文是18ways如何将相关的文案分组。

使用它们来保持翻译请求的小巧，并避免将无关的文本混合在一起。

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways apiKey="pk_dummy_demo_token" locale="fr-FR" baseLocale="en-GB" context="marketing">
      <Ways context="hero">
        <Hero />
      </Ways>
      <Ways context="pricing">
        <Pricing />
      </Ways>
    </Ways>
  );
}

嵌套的 Ways 范围组合成一个上下文路径。 marketing 加上 hero 变成 marketing.hero.

接受的区域设置

18ways 区分如下：

一个它可以识别的区域设置，例如 fr-FR
您的项目实际接受的区域设置

运行时可以从 API 获取接受的区域设置列表，然后根据该列表规范化传入的区域设置值。

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="pk_dummy_demo_token"
      locale="fr-FR"
      baseLocale="en-GB"
      acceptedLocales={['en-GB', 'fr-FR', 'de-DE']}
      context="app"
    >
      <App />
    </Ways>
  );
}

坚持

运行时使用的区域设置首选项 cookie 是 18ways_locale.

加载翻译时

@18ways/react 可以在种子上下文解析时挂起，并在客户端保持一个共享的内存缓存。

共享心理模型

保持模型简单：

选择适合您应用的正确软件包。
正确设置基础区域设置。
保持上下文键的稳定性和意义。
让运行时翻译完整的短语，而不是片段。

下一步: 消息格式化