在 if/else 之后使用 if else 来声明“ let”或“ const”？

我不知道为什么，但似乎我不能调用 let或 const变量，如果我在 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的警告

我该怎么补救？

85645 次浏览
小开

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`;
}
小开
最佳答案

这是一个很好的例子，说明一个简单的三元转让就足够了:

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是块作用域，所以这就是为什么它们在您的示例中不起作用。

对于 DRYer 代码，只能对依赖于它的部分使用三进制:

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
`${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
小开

不要使用 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}`;
}

也看看 混乱的类名结构。

小开

let和 const是块级作用域，因此您必须在块之外定义它们。var起作用是因为它可以升起。

您可以像 @ finalfreq一样在 if块之前定义 classes

或者

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


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

ESLint 标准喜欢行首的运算符。除非在计算机时间循环中，否则长条件句也应该被抽象出来。

在这种特殊情况下，字符串也很长，所以我也要把它们抽象出来。问题是贝尔吉的方式是大多数短裤将削弱他的风格，为一致性的原因。

如果您熟悉三元组，那么这种方法可以保持一切正常且易于阅读，这是您应该熟悉的。

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 ]
小开

另一种选择(不确定是 很好还是 优雅) :

const classes = (() => {
if (withBorder) {
return `${styles.circularBorder}...`;
} else {
return `${styles.dimensions}...`;
}
})();
小开

简单 ，只要这样做:

const genericStyle = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`,


classes = withBorder ? `${styles.circularBorder} ${genericStyle}` : genericStyle;


return (
<div className={classes}>
{renderedResult}
</div>
);

这也有一些清理，类使用了两次，只有 circularBorder是不同的..。


提交答案