<Branch>

Descripción general

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

const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>

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

Referencia

Props

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

Retorna

JSX.Element que contiene el contenido correspondiente a la rama especificada o el contenido alternativo.

Lanza

Error si la prop branch no es proporcionada o es inválida.

Ejemplos

Uso básico

<Branch> necesita tener una salida diferente para cada valor posible de la prop branch.

En este ejemplo, el valor de user.hairColor se utiliza para determinar la salida. Hemos definido las props black, brown y blonde para coincidir con los valores posibles de user.hairColor.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (you can pass a string if you prefer)
      blonde={<p>Their hair is light.</p>}
    />
  );
}

Contenido alternativo

Los children siempre se usarán como contenido alternativo si ninguna prop coincide con el valor pasado a branch.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}

Traduciendo <Branch>

Si quieres traducir el contenido, simplemente envuélvelo 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>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p> 
      </Branch>
    </T> 
  );
}

Añadiendo variables

Si quieres mostrar valores dinámicos en el branch, 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>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Notas

• Las claves para las ramas pueden ser cualquier valor de 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 un uso más avanzado y ejemplos, consulta Uso de componentes de ramificación.
• Para obtener más información sobre componentes variables como <Currency>, <DateTime>, <Num>, y <Var>, consulta la documentación de Uso de componentes variables.