<T> Wrapping-Verhalten
Spezifisches Verhalten, wie das CLI-Tool die `<T>`-Komponente umschließt
Überblick
Diese Seite beschreibt das genaue Verhalten, wie das CLI-Tool die <T>-Komponente umschließt.
Als Faustregel gilt, dass das CLI die <T>-Komponente um jeden statischen, bedeutungsvollen Inhalt legt.
Es wird auch eine <Var>-Komponente um jeden dynamischen Unterinhalt legen, der in einer <T>-Komponente enthalten ist.
Zum Beispiel wird das Folgende in eine <T>-Komponente eingeschlossen:
<div>Hello, world!</div> -> <T id="SOME_ID"><div>Hello, world!</div></T>aber das Folgende wird nicht eingeschlossen:
<div><img src="logo.png" /></div> -> <div><img src="logo.png" /></div>Das CLI-Tool wird immer sicherstellen, dass die finale Ausgabe gültiges JSX ist und die <T>-Komponente korrekt verwendet.
In einigen Fällen, wie bei logischen Operatoren, könnte menschliches Eingreifen nützlich sein, um bessere Übersetzungen mit mehr Kontext zu gewährleisten.
Bitte melden Sie uns Bugs oder unerwartetes Verhalten auf Github.
JSX-Ausdrücke
Das CLI wird automatisch Ausdrücke {...} in <Var>-Komponenten einschließen.
Dies liegt daran, dass Ausdrücke typischerweise dynamisch sind.
<div>Hello, {name}</div> -> <T id="SOME_ID"><div>Hello, <Var>{name}</Var></div></T>Inhalt, der in einer <Var>-Komponente enthalten ist, wird nicht übersetzt.
Wenn Sie dynamischen Inhalt übersetzen möchten, sollten Sie stattdessen die <Tx>-Komponente verwenden.
Statischer Inhalt in JSX-Ausdrücken
Die Ausnahme zur Regel des Ausdruck-Umschließens ist, wenn der Ausdruck statischen Inhalt enthält.
Zum Beispiel wird das Folgende nicht in eine <Var>-Komponente eingeschlossen:
<p>{"Hello," + " World!"}</p> -> <T id="SOME_ID"><p>{"Hello," + " World!"}</p></T>Template-Literale in JSX-Ausdrücken
Das CLI wird Template-Literale, die Quasis (${}) enthalten, in eine <Var>-Komponente einschließen, 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 eingeschlossen,
wenn eine <T>-Komponente auf der obersten Ebene notwendig ist. (d.h. wenn es anderen bedeutungsvollen Inhalt außerhalb des Ausdrucks gibt)
<div>Hello, {name && {name}} World!</div><T id="SOME_ID">
<div>Hello, <Var>{name && {name}}</Var> World!</div>
</T>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 eingeschlossen werden (um sicherzustellen, dass alle Inhalte übersetzbar sind)
<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>In solchen Fällen sollten Sie stattdessen eine <Branch> oder <Plural> Komponente verwenden.
Das CLI-Tool verwendet diese Komponenten derzeit nicht automatisch in einer <T>-Komponente, daher müssen Sie den Code manuell ändern.
Das vorherige Beispiel sollte wie folgt umgeschrieben werden:
<T id="SOME_ID">
<div>
<Branch branch={name == null}
true={<>Hello, </>}
false={<>Goodbye, </>}
/>
World!
</div>
</T>Wie ist dieser Leitfaden?