0
225
ViewsUso de diferentes valores en el método de búsqueda basado en el valor booleano - Reaccionar
Tengo un componente React que acepta 3 accesorios:
- código (puede ser un código de país o moneda)
- código de moneda (booleano)
- código de país (booleano)
Y hace uso de una flagsList así:
type CountryEntry = { currencyCode?: string, countryCode?: string, countryLabel: string, flagComponent: JSX.Element, }; export const flagsList: CountryEntry[] = { currencyCode: "AED", countryCode: "AE", countryLabel: "United Arab Emirates (the)", flagComponent: UnitedArabEmirates, }, { currencyCode: "AFN", countryCode: "AF", countryLabel: "Afghanistan", flagComponent: Afghanistan, }, ];Lo que estoy tratando de hacer es:
- cuando el código de moneda es
true, busque flagsList por código decurrencyCodey - cuando el código de país es
truebusca en la lista de banderas porcountryCodede país
mientras se mantiene el respaldo para cada uno si no se puede encontrar un código ( StyledIcon )
const CountryFlag = ({ code, currencyCode, countryCode }: Props) => { const countryEntry = flagsList.find( (f) => f.currencyCode === currencyCode ); if (!countryEntry) { return <StyledIcon name={"countryFallback"} />; } else { const FlagComponent = countryEntry.flagComponent; return ( <StyledImageWrapper className={className}> <FlagComponent /> </StyledImageWrapper> ); } };
·
Juan Pablo Isaza
1 answers
Answer question0
Considere usar una unión de cadenas o una enumeración en lugar de varios valores booleanos.
type CountryFlagProps = { keyCode: string; keyType: "currencyCode" | "countryCode"; }; const CountryFlag = ({ keyCode, keyType }: CountryFlagProps) => { const countryEntry = flagsList.find((f) => f[keyType] === keyCode); if (countryEntry) { return countryEntry.flagComponent } // Choose your fallback return <Flag country="UK" />; }; 
Si conoce todos sus códigos de antemano, puede ser más restrictivo y los consumidores obtendrán una mejor inteligencia al usar <CountryFlag />
type CurrencyCode = "AED" | "AFN"; type CountryCode = "AE" | "AF"; type CountryEntry = { currencyCode?: CurrencyCode; countryCode?: CountryCode; countryLabel: string; flagComponent: JSX.Element; }; const flagsList: Array<CountryEntry> = [ { currencyCode: "AED", countryCode: "AE", countryLabel: "United Arab Emirates (the)", flagComponent: <Flag country="AE" /> }, { currencyCode: "AFN", countryCode: "AF", countryLabel: "Afghanistan", flagComponent: <Flag country="AF" /> } ]; type CountryFlagProps = { keyCode: CurrencyCode | CountryCode; keyType: "currencyCode" | "countryCode"; }; const CountryFlag = ({ keyCode, keyType }: CountryFlagProps) => { const countryEntry = flagsList.find((f) => f[keyType] === keyCode); if (countryEntry) { return countryEntry.flagComponent; } return <Flag country="UK" />; }; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <CountryFlag keyCode="AF" keyType="countryCode" /> </div> ); }
·
Juan Pablo Isaza
Report
Answer question