<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> 组件中，因为它们可能是动态的。

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

逻辑运算符

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

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

<T id="SOME_ID">
  <div>Hello, <Var>{name && {name}}</Var> World!</div>
</T>

在表达式中，CLI 会将元素视为完全独立于表达式其余部分的内容。

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

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

<T id="SOME_ID">
  <div>
    <Var>
      {name ? <T id="HELLO"><>Hello, </></T> : <T id="GOODBYE"><>Goodbye, </></T>}
    </Var> World!
  </div>
</T>

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