Comportamiento de envoltura de <T>
Comportamiento específico de cómo la herramienta CLI envuelve el componente `<T>`
Descripción general
Esta página describe el comportamiento exacto de cómo la herramienta CLI envuelve el componente <T>.
Como regla general, la CLI envolverá el componente <T> alrededor de cualquier contenido estático y significativo.
También envolverá un componente <Var> alrededor de cualquier subcontenido dinámico contenido dentro de un componente <T>.
Por ejemplo, lo siguiente será envuelto en un componente <T>:
<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>pero lo siguiente no lo será:
<div><img src="logo.png" /></div> -> <div><img src="logo.png" /></div>La herramienta CLI siempre asegurará que el resultado final sea JSX válido y utilice correctamente el componente <T>.
En algunos casos, como con los operadores lógicos, podría ser útil alguna intervención humana para garantizar mejores traducciones con más contexto.
Por favor, reporta cualquier error o comportamiento inesperado en Github.
Expresiones JSX
La CLI envolverá automáticamente las expresiones {...} en componentes <Var>.
Esto se debe a que las expresiones son típicamente dinámicas.
<div>Hello, {name}</div> -> <T id="SOME_ID"><div>Hello, <Var>{name}</Var></div></T>El contenido dentro de un componente <Var> no será traducido.
Si deseas traducir contenido dinámico, deberías usar el componente <Tx> en su lugar.
Contenido estático en expresiones JSX
La excepción a la regla de envolver expresiones es cuando la expresión contiene contenido estático.
Por ejemplo, lo siguiente no será envuelto en un componente <Var>:
<p>{"Hello," + " World!"}</p> -> <T id="SOME_ID"><p>{"Hello," + " World!"}</p></T>Literales de plantilla en expresiones JSX
La CLI envolverá los literales de plantilla que contengan cuasi-citas (${}) en un componente <Var>, ya que pueden ser dinámicos.
<p>{`${temp}`}</p> -> <T id="SOME_ID"><p><Var>{`${temp}`}</Var></p></T>Operadores lógicos
Las expresiones JSX que contienen operadores lógicos como &&, ||, y ?
serán envueltas en un componente <Var>,
si es necesario un componente <T> en el nivel superior. (es decir, si hay otro contenido significativo fuera de la expresión)
Literales de plantilla en expresiones JSX
La CLI envolverá literales de plantilla que contengan cuasis (${}) en un componente <Var>ent, ya que pueden ser dinámicos.
<p>{`${temp}`}</p> -> <T id="SOME_ID"><p><Var>{`${temp}`}</Var></p></T>Operadores lógicos
Las expresiones JSX que contienen operadores lógicos como &&, || y ?
serán envueltas en un componente <Var>,
si es necesario un componente <T> en el nivel superior. (es decir, si hay otro contenido significativo fuera de la expresión)
<div>Hello, {name && {name}} World!</div><T id="SOME_ID">
<div>Hello, <Var>{name && {name}}</Var> World!</div>
</T>Dentro de la expresión, la CLI tratará los elementos como si fueran completamente independientes del resto de la expresión.
Esto significa que serán envueltos en sus propios componentes <T> (para asegurar que todo el contenido sea traducible)
<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>En casos como estos, deberías estar usando un componente <Branch> o <Plural> en su lugar.
La herramienta CLI actualmente no utiliza automáticamente estos componentes en un componente <T>, por lo que tendrás que cambiar el código manualmente.
El ejemplo anterior debería reescribirse como:
<T id="SOME_ID">
<div>
<Branch branch={name == null}
true={<>Hello, </>}
false={<>Goodbye, </>}
/>
World!
</div>
</T>¿Qué te parece esta guía?