Cách dùng React

@18ways/react cung cấp cho bạn các primitive lúc chạy. Nhiệm vụ chính là phân phạm chúng một cách gọn gàng.

Chế độ gốc so với chế độ phạm vi

Ở cấp gốc, Ways sở hữu khóa API, locale, các locale được chấp nhận và kho lưu trữ bản dịch dùng chung.

Các phạm vi lồng nhau Ways chỉ cần ngữ cảnh:

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

Nếu một cây con cần phiên locale riêng, hãy cấp cho nó một root riêng thay vì dựa vào ghi đè locale theo phạm vi:

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>

Root lồng nhau đó sẽ có locale được chọn, trạng thái đang tải và store đã hydrate riêng.

Đang tải

Nếu bạn muốn phản ánh công việc dịch thuật trong giao diện người dùng, hãy dùng useTranslationLoading().

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

useTranslationLoading() chỉ theo dõi công việc chặn cho ngữ cảnh hiện tại. Các điều khiển ở cấp root như LanguageSwitcher đã đọc trạng thái đang tải của runtime gốc cho bạn.

Suspense

<T> và useT() sẽ ném tới ranh giới React hoặc framework gần nhất khi một lượt đọc không thuộc chuyển tiếp vẫn đang chờ. Trong một lần chuyển locale thực sự, chúng vẫn tiếp tục render locale đã ổn định trước đó thông qua fallback của store thay vì bị treo. Công việc chặn bị giới hạn bởi suspenseTimeoutMs, sau đó việc render tiếp tục với phương án dự phòng tốt nhất hiện có trong khi việc tải bản dịch vẫn diễn ra ngầm ở nền.

Các hook ngôn ngữ địa phương

Root runtime cung cấp hai hook cấp thấp:

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

Hãy dùng chúng khi bạn muốn xây dựng các điều khiển ngôn ngữ của riêng mình thay vì LanguageSwitcher.

LanguageSwitcher

Bộ chuyển đổi tích hợp sẵn được kiểm soát và có thể kết hợp.

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

Nó đọc danh sách locale đã chấp nhận từ runtime gốc và xử lý trạng thái đang tải trong lúc locale tiếp theo đang được phân giải. Trong quá trình chuyển locale, UI đã dịch vẫn tiếp tục dùng locale đã ổn định gần nhất làm phương án dự phòng cho đến khi locale tiếp theo sẵn sàng.

Thành phần cấu tạo

Giữ nguyên câu và để <T> giữ nguyên hình dạng giao diện người dùng.

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

Lối thoát cho trình định dạng thông báo

Trình định dạng mặc định là waysParser. Chỉ đổi sang trình khác nếu bạn có lý do cụ thể.

  • messageFormatter="none" giữ nguyên các chuỗi.
  • một hàm định dạng tùy chỉnh cho phép bạn toàn quyền điều khiển phép nội suy.

Điều đó đáng lẽ phải hiếm.

Cách dùng React