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 compara con un value de salida según las claves que proporciones.

Referencias

Props

La sintaxis [key]: string indica claves arbitrarias que representan ramas potenciales. 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.

Lanza

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

Ejemplos

Uso básico

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

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

import { Branch } from 'gt-react';

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

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

import { Branch } from 'gt-react';

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 su color de cabello.</p> // [!code highlight]
    </Branch>
  );
}

Traducir <Branch>

Si quieres traducir el contenido, simplemente envuélvelo en un componente <T>.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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> 
      </Branch>
    </T> 
  );
}

Agregar 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-react';

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> // [!code highlight]
      </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 completas y localizadas.

Próximos pasos

• Para casos de uso más avanzados y ejemplos, consulta Using Branching Components.