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 se hace coincidir 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.

Errores

Se 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 valor posible de la prop branch.

En este ejemplo, se utiliza el valor 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>Su cabello es oscuro.</p>}
      brown="Su cabello es castaño." // (puedes pasar una cadena si prefieres)
      blonde={<p>Su cabello es rubio.</p>}
    />
  );
}

Contenido de respaldo predeterminado

El 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 rubio.</p>}
    >
      <p>Su cabello es desconocido.</p> // [!code highlight]
    </Branch>
  );
}

Traducción de <Branch>

Si quieres traducir el contenido, solo tienes que envolverlo 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 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-react';

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>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, y crea interfaces completas y localizadas.

Próximos pasos

• Para un uso más avanzado y ejemplos, consulta Using Branching Components.