Descripción general

El componente <Branch> te permite añadir 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 hace coincidir con un value 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.

Devuelve

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

Excepciones

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

Ejemplos

Uso básico

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

En este ejemplo, se usa el value de 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>Tiene el cabello oscuro.</p>}
      brown="Tiene el cabello castaño." // (puedes pasar un string si lo prefieres)
      blonde={<p>Tiene el cabello claro.</p>}
    />
  );
}

Contenido de respaldo predeterminado

Los children siempre se usarán 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 oscuro.</p>}
      brown={<p>Su cabello es castaño.</p>}
      blonde={<p>Su cabello es claro.</p>}
    >
      <p>Se desconoce el color de su cabello.</p> // [!code highlight]
    </Branch>
  );
}

Traducción de <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>Tiene el cabello oscuro.</p>}
        brown={<p>Tiene el cabello castaño.</p>}
        blonde={<p>Tiene el cabello claro.</p>}
      >
        <p>Se desconoce el color de su cabello.</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>Tiene el cabello oscuro.</p>}
        brown={<p>Tiene el cabello castaño.</p>}
        blonde={<p>Tiene el cabello claro.</p>}
      >
        <p>Color de cabello no contemplado: <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, y crea interfaces completas y localizadas.

Próximos pasos

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