Components

Var

<Var> 组件 API 参考

概览

<Var> 组件用于渲染不应被翻译的内容。 它适合用于显示变量、代码片段或其他不应翻译的内容。 此外,它也可用于渲染需要保密的内容,例如 API Keys 或个人信息。

<Var>{user.name}</Var>

<Var> 组件始终在 <T> 组件内部使用。 可将其理解为一个通用占位组件,用于承载不属于 <Currency><DateTime><Num> 范畴的动态值。

参考资料

Props(属性)

Prop

Type

描述

Prop描述
children组件内部要渲染的内容;若提供,则优先于 value
value可选的默认值;当未提供 children 时显示。可以是字符串。

返回

包含不应被翻译内容的 JSX.Element


示例

基本示例

<Var> 组件必须在 <T> 组件内部使用。

Example.jsx
import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      翻译这段文本!
      您的名称是:<Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}

注意事项

  • Variable Components 对于在翻译中保留不可翻译的动态内容至关重要。
  • 始终在 <T> 组件内使用 Variable Components。
  • <Num><Currency><DateTime> 等组件提供本地化能力,确保格式正确。

后续步骤

  • 如需更深入了解 <Var> 组件及其他变量组件(如 <Currency><DateTime><Num>)的讨论与用法示例, 请参阅文档:使用变量组件
  • API 参考 中进一步了解特定 Variable 组件的格式化 options。

这份指南怎么样?

Var