Static
`<Static>` 组件的 API 参考
概览
<Static> 组件用于在不影响词形一致性、动词变位和词序调整的前提下，处理句子拆分和可复用内容。
在下面的示例中，会创建两种单独的译文：“The beautiful boy plays with the ball”和“The beautiful girl plays with the ball”。
function getSubject(gender) {
return gender === "male" ? "boy" : "girl"
}
<T>
漂亮的<Static>{getSubject(gender)}</Static>在玩球。
</T>The <Static> component tells the CLI tool to dereference a function call and catalog all possible content being returned by that function, treating every return statement as if it had a <T> component wrapping it.
Advanced Usage:
The <Static> component is an advanced feature and should be used with caution as it can generate deceptively large numbers of translation entries.
Furthermore, <Static> enforces a strict requirement that all possible content permutations must be statically analyzable.
For more information, see the release notes for gt-next@6.8.0.
参考
Props
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 一个返回静态内容的函数调用。命令行界面（CLI）工具会分析其所有可能的返回值。 |
未来，<Static> 将支持更复杂的表达式，例如三元运算符、条件语句和函数调用。
返回值
一个 React.JSX.Element，其中包含由函数调用渲染的内容，每种可能的结果都会对应一个单独的翻译 Entry。
行为
构建时分析
在构建过程中，CLI 工具会分析包裹在 <Static> 组件中的函数，并为每个可能的返回值创建单独的翻译条目。
这样可以在不同语言之间正确处理语法和词序。
函数要求
在 <Static> 组件内部使用的函数必须返回能够在构建时确定的静态内容。支持的语法形式包括：
- 字符串、数字和布尔字面量
- 带有嵌套
<Static>和<Var>组件的 JSX 表达式 - 三元运算符
- 条件语句（if/else）
- 对其他静态函数的调用
示例
基本用法
使用 <Static> 处理会影响句子结构的动态内容。
import { T, Static } from 'gt-react';
function getSubject(gender) {
return gender === "male" ? "boy" : "girl"
}
export default function Example({ gender }) {
return (
<T>
这个<Static>{getSubject(gender)}</Static>很漂亮。
</T>
);
}这会创建两个翻译条目：
- "The boy is beautiful"
- "The girl is beautiful"
使用变量
结合使用 <Static> 和 <Var>，在静态函数的返回值中插入动态内容。
import { T, Static, Var } from 'gt-react';
function getGreeting(title) {
return (
<>
你好，<Static>{getTitle(title)}</Static>。你好吗，<Var>{name}</Var>？
</>
);
}
export default function Greeting({ title, name }) {
return (
<T>
<Static>{getGreeting(title)}</Static>
</T>
);
}多个 Static 组件
在同时使用多个 <Static> 组件时要注意，因为它们会成倍增加翻译条目的数量。
import { T, Static } from 'gt-react';
function getSubject(gender) {
return gender === "male" ? "boy" : "girl"
}
function getObject(toy) {
return toy === "ball" ? "ball" : "crayon"
}
export default function PlayExample({ gender, toy }) {
return (
<T>
<Static>{getSubject(gender)}</Static>玩<Static>{getObject(toy)}</Static>。
</T>
);
}这会创建四个翻译条目（2 × 2 组合）：
- "男孩玩球"
- "男孩玩蜡笔"
- "女孩玩球"
- "女孩玩蜡笔"
支持的函数语法
function getExamples(key) {
switch (key) {
case "literals":
if (condition1) {
return "男孩"
} else if (condition2) {
return 22
} else {
return true
}
case "jsx":
return (
<>
你好，<Static>{getTitle(title)}</Static>。<Var>{name}</Var>，你好吗？
</>
);
case "ternary":
return condition ? "男孩" : "女孩"
case "function_calls":
return otherStaticFunction();
}
}局限性
性能影响
使用 <Static> 可能会导致翻译条目数量呈指数级增长。
每增加一个 <Static> 组件，都会使翻译条目的总数量成倍增加。
函数约束
- 函数必须能在构建时被分析
- 所有返回路径必须是可静态确定的
- 函数返回中的动态内容必须使用
<Var>组件 - 目前仅支持将函数调用作为直接 children
变量内容
任何位于静态函数返回值中的动态或变量内容都必须使用 <Var> 组件包裹。
// 正确
function getContent() {
return <>Hello, <Var>{userName}</Var>!</>;
}
// 错误 - 将导致构建错误
function getContent() {
return <>Hello, {userName}!</>;
}注意事项
<Static>组件专为处理句子片段化而设计，同时在多语言环境下保持语法准确性。- 在同一处翻译中使用多个
<Static>组件时，务必考虑其性能影响。 - 将静态函数中的每一个 return 语句都视为已用
<T>组件包裹。 - 谨慎使用
<Static>——在可能的情况下优先选择更简单的翻译结构。
后续步骤
本指南如何?