<T> Umschließungsverhalten

Übersicht

Diese Seite beschreibt das genaue Verhalten, wie das CLI-Tool die <T>-Komponente umschließt.

Als Faustregel gilt, dass die CLI die <T>-Komponente um jeden statischen, bedeutungsvollen Inhalt umschließen wird. Sie wird auch eine <Var>-Komponente um jeden dynamischen Teilinhalt umschließen, der innerhalb einer <T>-Komponente enthalten ist.

Zum Beispiel wird Folgendes in eine <T>-Komponente eingewickelt:

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

aber Folgendes nicht:

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

Das CLI-Tool stellt immer sicher, dass die endgültige Ausgabe gültiges JSX ist und die <T>-Komponente korrekt verwendet.

In einigen Fällen, wie bei logischen Operatoren, könnte ein menschliches Eingreifen nützlich sein, um bessere Übersetzungen mit mehr Kontext zu gewährleisten.

JSX-Ausdrücke

Die CLI wird Ausdrücke {...} automatisch in <Var>-Komponenten einwickeln. Dies liegt daran, dass Ausdrücke typischerweise dynamisch sind.

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

Statischer Inhalt in JSX-Ausdrücken

Die Ausnahme von der Regel zur Ausdrucksumschließung ist, wenn der Ausdruck statischen Inhalt enthält.

Zum Beispiel wird Folgendes nicht in eine <Var>-Komponente eingewickelt:

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

Template-Literale in JSX-Ausdrücken

Die CLI wird Template-Literale, die Quasis (${}) enthalten, in eine <Var>-Komponent, da sie dynamisch sein können.

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

Logische Operatoren

JSX-Ausdrücke, die logische Operatoren wie &&, || und ? enthalten, werden in eine <Var>-Komponente eingebettet, wenn eine <T>-Komponente auf der obersten Ebene erforderlich ist (d.h. wenn es anderen bedeutungsvollen Inhalt außerhalb des Ausdrucks gibt).

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

Innerhalb des Ausdrucks behandelt die CLI Elemente so, als wären sie völlig unabhängig vom Rest des Ausdrucks.

Das bedeutet, dass sie in ihre eigenen <T>-Komponenten eingebettet werden (um sicherzustellen, dass alle Inhalte übersetzbar sind).

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

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