Użyj else, aby zadeklarować `let` lub` const` do użycia po if/else?

Question

Nie jestem pewien, dlaczego, ale wydaje się, że nie mogę wywołać zmiennych let lub const, jeśli deklaruję je w oświadczeniu if/else.

if (withBorder) { 
    const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} else { 
    const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} 
return (
    <div className={classes}> 
    {renderedResult} 
    </div> 
); 

Jeśli użyję tego kodu, będzie to oznaczać, że classes is not defined.

Ale jeśli mogę zmienić const do var klas jest zdefiniowane, ale pojawia się ostrzeżenie o classes used outside of binding context i all var declarations must be at the top of the function scope

Jak mogę rozwiązać ten problem?

Answer 1

Należy użyć potrójny Zadanie:

const classes = withBorder ? 
`${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
`${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 

Jak określono w innych uwag/odpowiedzi let i const są blokowane zakres, dlatego nie działają one w twoim przykładzie.

podania kodu suszarka można również gniazdo trójoperandowy wewnątrz łańcucha dosłowny:

const classes = `${withBorder ? styles.dimensions: ''} ${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 

Answer 2

let i const mają zasięg na poziomie bloku, co oznacza, że ​​mogą być używane tylko w obrębie bloku, w którym zostały zdefiniowane, tj. { // if defined in here can only be used here }

W tym przypadku po prostu zdefiniowania powyżej if/else

let classes; 

if (withBorder) { 
    classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} else { 
    classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
} 

Answer 3

nie używaj if - else -statement ale potrójny wyrażenie:

const classes = withBorder 
    ? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
    :       `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 

Alternatywnie, po prostu zadeklaruj go poza blokiem if, który pozwala również pozbyć się duplikowania:

let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 
if (withBorder) { 
    classes += ` ${styles.circularBorder}`; 
    // or if you care about the order, 
    // classes = `${styles.circularBorder} ${classes}`; 
} 

Zobacz także messy classnames construction.

Answer 4

let i const mają zasięg na poziomie bloku, więc należy je zdefiniować poza blokiem. var działa, ponieważ podnosi się.

Można zdefiniowane classes przed blokiem if jak @finalfreq

lub

let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`; 

if (withBorder) { 
    classes += `${styles.circularBorder}`; 
} 

Answer 5

standardowy ESLint lubi operatorów na początku wiersza. Długie warunkowe powinny być również wyabstrahowane, chyba że w pętli czasu komputera.

W tym konkretnym przypadku ciągi są również długie, więc też je abstrakcjonuję. Problem z Bergim sposobem jest najbardziej linters będzie okaleczyć jego styl, ze względu na zgodność.

W ten sposób wszystko jest w porządku i łatwe do odczytania, jeśli dobrze znasz trójce, które powinieneś.

const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` 
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]