最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

公共营销页面通常希望基于路径的区域路由以优化搜索引擎排名。而内部仪表板和内部工具的路由通常不需要。因此，当前网站将 /dashboard、/__design 和 /__email 排除在路径路由之外。

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文案的位置：

tsx

import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways
      apiKey="YOUR_18WAYS_PUBLIC_API_KEY"
      locale="en-GB"
      baseLocale="en-GB"
      context="app"
    >
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

避免使用匿名桶，例如 page1、copy 或 misc。

翻译完整的思想

好：

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as{' '}
      <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

避免：

18ways 可以将常见链接案例作为一条消息处理。 <T><a href="#">点击这里</a> 查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T>{' '}
      <T>your latest invoice</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 进行区域设置解析和元数据。
如果您只使用 React，请在您的应用中保持区域状态，并使用 @18ways/react。
如果您在 React 之外，请使用 @18ways/core 并自行负责 UI 集成。

让路由与您的产品匹配

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩的翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。