如果else聲明`let`或`const`在if/else之後使用，則使用if？else？

我不知道爲什麼，但如果我在if/else聲明中聲明它們，我似乎無法調用let或const變量。如果else聲明`let`或`const`在if/else之後使用，則使用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> 
);

如果我使用這段代碼，它說classes is not defined。

但是，如果我改變const到var類的定義，但我得到一個警告約classes used outside of binding context和all var declarations must be at the top of the function scope

我怎麼能解決這個問題？

來源

2016-11-29 Johhan Santana

'let'和'const'被設計爲在'if'和'for'等控制語句的範圍內。如果你想使用'let'，你需要在'if'之前定義這個變量，然後把它分配給它。 – UnholySheep

在大多數編程語言中都是這樣。舊的JavaScript仍然會讓你擺脫困境。但是，如果它是一個常量，那麼該值應該被賦值一次並且永遠不會改變......將它聲明爲在if塊之外的'let'並將其設置在if/else塊內。 – ps2goat

爲什麼不只是使用* var *？ – RobG

您應該使用三元賦值以上：

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`

正如在其他意見中指定/回答let和const被封鎖因此這就是爲什麼他們不能在你的例子中工作。

對於你也可以窩內串三元面值的機碼：

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

來源

2016-11-29 22:39:45 maioman

嗯，完全忘了內聯if/else，肯定會很好地重構代碼。謝謝！ –

let和const是塊級別的作用域，意味着它們只能在它們已經在其中定義的塊中使用。 { // if defined in here can only be used here }

在這種情況下我也只是定義了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`; 
}

來源

2016-11-29 22:38:33 finalfreq

謝謝！這真的是總結它。 –

不要使用if - else語句來，但三元表達式：

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`;

或者，只是在if塊之外聲明它，這可以讓您擺脫以下重複：

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}`; 
}

也看看messy classnames construction。

來源

2016-11-29 22:40:34 Bergi

let和const是塊級別的作用域，因此您必須在塊之外定義它們。 var工作，因爲它提升。

您可以if塊之前定義classes像@finalfreq

或

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

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

來源

2016-11-29 23:03:53 antyang

ESLint標準喜歡的運營商在該行的開頭。除非在計算機時間循環中，否則應該將長條件抽象出來。

在這種特殊情況下，字符串也很長，所以我也會抽象出來。 Bergi的方式存在的問題是大多數棉絨短褲會因爲一致性原因而削弱他的風格。

如果你熟悉三元組，應該是這樣，這樣可以保持一切正常並且易於閱讀。

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 ]

來源

2018-01-23 22:57:37

如果else聲明`let`或`const`在if/else之後使用，則使用if？else？

回答

相關問題