使用分支

概述

gt-react 中的分支组件能够基于特定条件动态渲染内容。这些组件包括：

<Branch>：根据匹配的 branch 属性渲染内容。
<Plural>：根据给定数字的复数规则渲染内容。

这两个组件都为管理本地化应用程序中的条件逻辑和动态内容提供了强大的工具。

在本指南中，我们将涵盖：

什么是分支组件？

如何使用分支组件

何时使用分支组件

示例

常见陷阱

什么是分支组件？

分支组件根据特定条件或值动态选择要渲染的内容。

`<Branch>`

<Branch> 组件允许您根据提供的 branch 值渲染不同的内容。如果没有找到匹配的分支，则会渲染回退的 children 内容。

例如，<Branch> 组件非常适合基于应用程序状态、用户偏好或任何动态数据进行条件渲染。

最常见的用例是用它来替代三元或条件运算符。

`<Plural>`

<Plural> 组件扩展了 <Branch> 的功能，通过自动处理复数形式和数字一致性。它使用提供的 n 值来确定显示哪种复数形式，基于特定语言环境的规则。

例如，<Plural> 组件非常适合动态渲染单数和复数文本，如"1 个项目"与"2 个项目"。

复数组件通常与 <Num> 组件结合使用，以本地化数字及其对应的文本。

与 `<T>` 一起使用

<Branch> 和 <Plural> 组件应该在 <T> 组件内使用，以便对动态内容进行翻译处理。

当在 <T> 组件内使用时，内容会自动翻译并以用户选择的语言呈现。

当单独使用时，它们只会按原样渲染内容，不进行翻译。

如何使用分支组件

使用 `<Branch>` 的分支逻辑

<Branch> 组件用于基于 branch 值进行灵活的内容切换。

您可以定义多个可能的分支，组件将渲染与匹配的分支键对应的内容。

此外，您可以将其他变量组件与 <Branch> 组件结合使用。

const branch: 'option1' | 'option2' = 'option1';
<T>
  <Branch 
    branch={branch}
    option1={<p>Option 1</p>}
    option2={<p>Option 2</p>}
  >
    Fallback content
  </Branch>
</T>

<Branch> 组件应该在 <T> 组件内使用。这允许内容被自动翻译。

查看API 参考获取更多详情。

使用 `<Plural>` 进行复数化

<Plural> 组件基于 n 的值自动处理复数逻辑。该组件会根据给定的数字和语言环境动态选择适当的复数形式。

const count: number = 1;
<T>
  <Plural
    n={count}
    singular={<><Num>{1}</Num> item.</>}
    plural={<><Num>{count}</Num> items.</>}
    // Additional options
    zero={<><Num>{count}</Num> items.</>}
    one={<><Num>{count}</Num> item.</>}
    two={<><Num>{count}</Num> items.</>}
    few={<><Num>{count}</Num> items.</>}
    many={<><Num>{count}</Num> items.</>}
    other={<><Num>{count}</Num> items.</>}
    dual={<><Num>{count}</Num> items.</>}
  />
</T>

可用的复数形式取决于语言环境，并遵循Unicode CLDR 复数规则。

查看API 参考获取更多详情。

何时使用分支组件

分支组件对于管理应用程序中的动态内容非常重要。

当你需要根据条件显示不同内容时，使用 <Branch>。

这些条件可以基于变量组件、布尔值或函数。

例如，如果你的代码中有三元运算符或条件渲染，你可以使用 <Branch> 来替代它。

const isActive = true;
// Ternary operator
<Branch branch={isActive} true={<p>The user is active.</p>} false={<p>The user is inactive.</p>}>
  <p>Status unknown.</p>
</Branch>

// Conditional rendering
<Branch branch={isActive} true={<p>The user is active.</p>}>
  <></>
</Branch>

// Ternary operator
const isActive = true;
{isActive ? <p>The user is active.</p> : <p>The user is inactive.</p>}

// Conditional rendering
{isActive && <p>The user is active.</p>}

如果你想要渲染具有正确复数形式的内容，使用 <Plural>。

const count = 1;
<Plural n={count} one={<p>1 item</p>} other={<p>{count} items</p>} />

const count = 1;
{count === 1 ? <p>1 item</p> : <p>{count} items</p>}

<Branch> 和 <Plural> 组件可以独立使用，无需 <T> 组件。当独立使用时，它们将按原样渲染内容，不会翻译它。

然而，它们通常在 <T> 组件内使用，以便为翻译净化动态内容。

示例

`<Branch>`

import { T, Branch, Var } from 'gt-react';

export default function UserStatus() {
  const [status, setStatus] = useState<'active' | 'inactive' | undefined>(undefined);
  const [name, setName] = useState<string>('John Doe');
  return (
    <T>
      <Branch
        branch={status}
        active={<p>The user <Var>{name}</Var> is active.</p>}
        inactive={<p>The user <Var>{name}</Var> is inactive.</p>}
      >
        <p>Status unknown.</p>
      </Branch>
    </T>
  );
}

在上面的示例中，<Branch> 组件根据 status 的值动态切换三种渲染内容。

当 status 为 "active" 时，组件渲染：

<p>The user <Var>{name}</Var> is active.</p>

当 status 为 "inactive" 时，组件渲染：

<p>The user <Var>{name}</Var> is inactive.</p>

当 status 既不是 "active" 也不是 "inactive" 时，组件渲染回退内容：

<p>Status unknown.</p>

由于 <Branch> 组件被包裹在 <T> 组件中，渲染的内容会在上下文中自动翻译。

在这个示例中，它根据用户的订阅计划显示不同的描述。

import { Branch } from 'gt-react';

export default function SubscriptionDetails() {
  const [plan, setPlan] = useState<'free' | 'premium' | 'enterprise' | undefined>(undefined);
  return (
    <Branch
      branch={plan}
      free={<p>You are on the Free plan. Upgrade to unlock more features!</p>}
      premium={<p>You are enjoying the Premium plan with full access to features.</p>}
      enterprise={<p>You are on the Enterprise plan. Contact support for tailored solutions.</p>}
    >
      <p>No subscription plan detected.</p>
    </Branch>
  );
}

branch 属性决定显示哪个计划消息。
如果 plan 是 "free"、"premium" 或 "enterprise"，则显示相应的消息。
如果 plan 不匹配这些值中的任何一个，则显示回退内容（"No subscription plan detected."）。

`<Plural>`

<Plural> 组件根据 n 的值动态处理单数和复数内容。这个示例显示用户收件箱中未读消息的数量。

import { T, Plural, Num } from 'gt-react';

export default function UnreadMessages() {
  const [unreadCount, setUnreadCount] = useState<number>(1);
  return (
    <T>
      <Plural
        n={unreadCount}
        one={<>You have <Num>{unreadCount}</Num> unread message.</>}
        other={<>You have <Num>{unreadCount}</Num> unread messages.</>}
      />
    </T>
  );
}

n 属性指定未读消息的数量。
如果 unreadCount 是 1，组件渲染："You have 1 unread message."
对于任何其他值，它渲染："You have X unread messages." 其中 X 是由 <Num> 格式化的 unreadCount 值。

常见陷阱

缺失分支值

如果没有提供分支值或者分支值与任何键不匹配，<Branch> 组件将渲染后备子内容。始终确保可能的分支键与传递给branch属性的值匹配。

import { Branch } from 'gt-react';

export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>The user is active.</p>}
      inactive={<p>The user is inactive.</p>}
    >
      <p>Status unknown.</p>
    </Branch>
  );
}

如果 status 是 undefined 或者是除 active 或 inactive 以外的值，将显示后备内容 "Status unknown."。

缺失复数形式

记得在默认语言中指定所有必要的复数形式。这是 gt-react 确保您的应用程序始终有后备内容可显示的方式。

例如，如果英语是您的默认语言，您应该提供英语的所有复数形式。

import { Plural, Num } from 'gt-react';

<Plural
  n={count}
  one={<>You have <Num>{count}</Num> unread message.</>}
  other={<>You have <Num>{count}</Num> unread messages.</>}
/>

在这里，我们为英语提供了 one 和 other 复数形式。

或者，您也可以为英语提供 singular 和 plural。

注释

分支组件对于管理应用程序中的动态和本地化内容至关重要。
<Branch> 组件非常灵活，可以适应各种条件和状态。
<Plural> 组件通过自动遵循特定于语言环境的规则简化了复数形式的处理。
始终包含一个后备的 children 属性，以获得更好的错误处理和用户体验。

后续步骤

查看 API 参考中的 <Branch> 和 <Plural> 获取更多详细信息。
在 Unicode CLDR 复数规则中了解更多关于复数规则和分支逻辑的信息。
探索如何使用变量组件。

使用分支

在本页面