Components
Branch
<Branch> 组件 API 参考
概述
<Branch> 组件可为翻译添加条件逻辑。
const status = 'active';
<Branch branch={status}
active={<p>用户处于活跃状态。</p>}
inactive={<p>用户处于非活跃状态。</p>}
/>你将一个 value 传入 branch 参数，系统会根据你提供的键，将其匹配到相应的输出 value。
参考资料
Props
Prop
Type
[key]: string 语法表示用于潜在分支的任意键。
例如，可以将 active 和 inactive 等分支作为参数添加。
| Prop | Description |
|---|---|
branch | 要渲染的分支名称。 |
children | 当未找到匹配分支时要渲染的兜底内容。 |
[key]: string | 表示给定分支值的可能内容的分支。每个键对应一个分支，其值为要渲染的内容。 |
返回
包含与指定分支对应内容或 fallback 内容的 JSX.Element。
抛出
当未提供或提供了无效的 branch 属性时，会抛出 Error。
示例
基本用法
<Branch> 需要针对 branch prop 的每一种可能取值生成不同的输出。
在这个示例中，使用 user.hairColor 的取值来决定输出。
我们定义了 black、brown 和 blonde 这几个 prop，与 user.hairColor 的可能取值相对应。
import { Branch } from 'gt-next';
export default function HairColor({ user }) {
return (
<Branch branch={user.hairColor}
black={<p>他们的头发是深色的。</p>}
brown="他们的头发是中等色调。" // (如果你愿意,也可以传递字符串)
blonde={<p>他们的头发是浅色的。</p>}
/>
);
}兜底内容
当没有任何 prop 与传递给 branch 的 value 匹配时，children 将始终作为兜底使用。
import { Branch } from 'gt-next';
export default function HairColor({ user }) {
return (
<Branch branch={user.hairColor}
black={<p>他们的头发是深色的。</p>}
brown={<p>他们的头发是棕色的。</p>}
blonde={<p>他们的头发是浅色的。</p>}
>
<p>他们的头发颜色未知。</p> // [!code highlight]
</Branch>
);
}翻译 <Branch>
如果要翻译其中的内容，只需将其包裹在 <T> 组件中。
import { T, Branch } from 'gt-next';
export default function HairColor({ user }) {
return (
<T id="example">
<Branch branch={user.hairColor}
black={<p>他们的头发是深色的。</p>}
brown={<p>他们的头发是中间色调的。</p>}
blonde={<p>他们的头发是浅色的。</p>}
>
<p>他们的头发颜色未知。</p>
</Branch>
</T>
);
}添加变量
如果你需要在分支中渲染动态值，请确保将它们包裹在 <Currency>、<DateTime>、<Num> 或 <Var> 组件中。
import { Branch, T, Var } from 'gt-next';
export default function HairColor({ user }) {
return (
<T id="example">
<Branch branch={user.hairColor}
black={<p>他们的头发是深色的。</p>}
brown={<p>他们的头发是中等色调的。</p>}
blonde={<p>他们的头发是浅色的。</p>}
>
<p>未处理的发色:<Var>{user.hairColor}</Var></p>
</Branch>
</T>
);
}注意事项
- 分支的键可以是任何与 branch 属性匹配的字符串。这种灵活性便于将
<Branch>适配到各种用例。 - 将
<Branch>与其他组件配合使用，例如用于翻译的<T>和用于动态内容的变量组件，以构建丰富且本地化的界面。
后续步骤
- 如需了解更高级的用法与示例，请参阅使用分支组件。
本指南如何?