如果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？

回答

相关问题