Descripción general

El componente <Branch> te permite agregar lógica condicional a una traducción.

const status = 'active';
<Branch branch={status}
    active={<p>El usuario está activo.</p>}
    inactive={<p>El usuario está inactivo.</p>}
/>

Pasas un value al parámetro branch, y este se compara con un valor de salida según las claves que proporciones.

Referencias

Props

La sintaxis [key]: string indica claves arbitrarias que representan posibles ramas. Por ejemplo, se pueden agregar como parámetros ramas como active e inactive.

Devuelve

JSX.Element que contiene el contenido correspondiente a la rama especificada o el contenido de respaldo predeterminado.

Excepciones

Error si la prop branch no se proporciona o no es válida.

Ejemplos

Uso básico

<Branch> debe producir una salida diferente para cada valor posible de la prop branch.

En este ejemplo, se usa el value user.hairColor para determinar la salida. Hemos definido las props black, brown y blonde para que coincidan con los valores posibles de user.hairColor.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Su cabello es oscuro.</p>}
      brown="Su cabello es castaño." // (puedes pasar una cadena si lo prefieres)
      blonde={<p>Su cabello es claro.</p>}
    />
  );
}

Contenido de respaldo predeterminado

El prop children siempre se usará como contenido de respaldo predeterminado si ninguna prop coincide con el value pasado a branch.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Su cabello es negro.</p>}
      brown={<p>Su cabello es castaño.</p>}
      blonde={<p>Su cabello es rubio.</p>}
    >
      <p>Su cabello es desconocido.</p> // [!code highlight]
    </Branch>
  );
}

Traducción de <Branch>

Para traducir el contenido, basta con envolverlo en un componente <T>.

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Su cabello es negro.</p>}
        brown={<p>Su cabello es castaño.</p>}
        blonde={<p>Su cabello es rubio.</p>}
      >
        <p>Su cabello es desconocido.</p>
      </Branch>
    </T> 
  );
}

Añadir variables

Si quieres mostrar valores dinámicos en la rama, asegúrate de envolverlos en los componentes <Currency>, <DateTime>, <Num> o <Var>.

import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Su cabello es oscuro.</p>}
        brown={<p>Su cabello es castaño.</p>}
        blonde={<p>Su cabello es rubio.</p>}
      >
        <p>Color de cabello no controlado: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Notas

• Las claves de las ramas pueden ser cualquier cadena que coincida con la prop branch. Esta flexibilidad facilita adaptar <Branch> a una amplia variedad de casos de uso.
• Combina <Branch> con otros componentes, como <T> para traducciones y componentes de variables para contenido dinámico, para crear interfaces ricas y localizadas.

Próximos pasos

• Para casos de uso más avanzados y ejemplos, consulta Uso de componentes ramificados.