<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式は、 トップレベルで<T>コンポーネントが必要な場合（つまり、式の外に他の意味のあるコンテンツがある場合）、 <Var>コンポーネントでラップされます。

<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>