<T> 包装行为

概述

本页描述了 CLI 工具如何包装 <T> 组件的确切行为。

作为经验法则，CLI 将会在任何静态的、有意义的内容周围包装 <T> 组件。 它还会在 <T> 组件内包含的任何动态子内容周围包装 <Var> 组件。

例如，以下内容将被包装在 <T> 组件中：

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

但以下内容不会：

<div><img src="logo.png" /></div> -> <div><img src="logo.png" /></div>

CLI 工具将始终确保最终输出是有效的 JSX 并正确使用 <T> 组件。

在某些情况下，例如使用逻辑运算符时，一些人工干预可能有助于确保更好的翻译和更多的上下文。

JSX 表达式

CLI 将自动用 <Var> 组件包装表达式 {...}。 这是因为表达式通常是动态的。

<div>Hello, {name}</div> -> <T id="SOME_ID"><div>Hello, <Var>{name}</Var></div></T>

JSX 表达式中的静态内容

表达式包装规则的例外是当表达式包含静态内容时。

例如，以下内容不会被包装在 <Var> 组件中：

<p>{"Hello," + " World!"}</p> -> <T id="SOME_ID"><p>{"Hello," + " World!"}</p></T>

JSX 表达式中的模板字面量

CLI 将在包含准引用（${}）的模板字面量周围包装 <Var> 组件ent，因为它们可以是动态的。

<p>{`${temp}`}</p> -> <T id="SOME_ID"><p><Var>{`${temp}`}</Var></p></T>

逻辑运算符

包含逻辑运算符如 &&、|| 和 ? 的JSX表达式 将被包装在 <Var> 组件中， 如果在顶层需要 <T> 组件。（即如果表达式外有其他有意义的内容）

<div>Hello, {name && {name}} World!</div>

在表达式内部，CLI将把元素视为与表达式的其余部分完全独立。

这意味着它们将被包装在自己的 <T> 组件中（以确保所有内容都可翻译）

<div>{name ? <>Hello, </> : <>Goodbye, </>}</div>

<T id="SOME_ID">
  <div>
    <Branch branch={name == null}
      true={<>Hello, </>}
      false={<>Goodbye, </>}
    />
    World!
  </div>
</T>