React 使用

@18ways/react 为您提供运行时原语。主要任务是将它们清晰地限定在作用域内。

根模式与作用域模式

在根本上，Ways 拥有 API 密钥、区域设置、接受的区域设置和共享翻译存储。

嵌套的 Ways 范围只需要上下文：

tsx
<Ways apiKey="pk_dummy_demo_token" locale="es-ES" baseLocale="en-GB" context="checkout">
  <Ways context="payment-form">
    <PaymentForm />
  </Ways>
</Ways>

如果某个子树需要自己的 locale 会话，就给它自己的根，而不是依赖一个局部范围内的 locale 覆盖：

tsx
<Ways apiKey="pk_dummy_demo_token" locale="en-GB" baseLocale="en-GB" context="app">
  <MarketingSite />
 
  <Ways apiKey="pk_dummy_demo_token" locale="ja-JP" baseLocale="en-GB" context="hero-demo">
    <EmbeddedLocaleDemo />
  </Ways>
</Ways>

那个嵌套的根会拥有自己的已选区域设置、加载状态和已水合的存储。

加载状态

如果您想在用户界面中反映翻译工作，请使用 useTranslationLoading()。

tsx
import { useTranslationLoading } from '@18ways/react';
 
function SavePanel() {
  const isTranslationLoading = useTranslationLoading();
 
  return <span>{isTranslationLoading ? 'Loading translations...' : 'Ready'}</span>;
}

useTranslationLoading() 只会跟踪当前上下文中的阻塞性工作。像 LanguageSwitcher 这样的根级控件 已经会为你读取根运行时加载状态。

悬念

<T> 和 useT() 在非过渡读取 仍处于挂起状态时，会抛给最近的 React 或框架边界。在真正的 locale 过渡期间，它们会通过 store 回退继续渲染之前已稳定的 locale，而不是挂起。阻塞性工作受 suspenseTimeoutMs 限制，超过 该时间后，渲染会以当前可用的最佳回退继续进行，同时翻译加载在 后台继续。

区域钩子

根运行时暴露了两个低级钩子：

tsx
import { useCurrentLocale, useSetCurrentLocale } from '@18ways/react';

当您想要构建自己的区域设置控件而不是 LanguageSwitcher 时，请使用它们。

语言切换器

内置切换器是可控且可组合的。

tsx
<LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} direction="down" />

它从根运行时读取已接受的 locale 列表，并在下一个 locale 解析期间处理加载状态。在 locale 切换过程中，已翻译的 UI 会继续使用上一个已稳定的 locale 作为回退，直到下一个 locale 就绪。

组件组成

保持句子完整，并让 <T> 保持用户界面的形状。

tsx
<T>
  <a href="/pricing">Click here</a> to see more
</T>

消息格式化器逃生口

默认格式化程序是 waysParser。只有在你有具体理由的情况下才可以切换。

  • messageFormatter="none" 保持字符串不变。
  • 自定义格式化函数让你完全掌控插值。

这应该是罕见的。

React 用法