javascript - 使用 if else 声明 `let` 或 `const` 在 if/else 之后使用？

Question

我不知道为什么，但如果我在 if/else< 中声明 let 或 const 变量，我似乎无法调用它们 声明。

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

如果我使用这段代码，它会说类未定义。

但是，如果我将 const 更改为 var 已定义类，但我会收到有关在绑定(bind)上下文之外使用的 类 和 的警告>所有 var 声明必须位于函数作用域的顶部

我该如何解决这个问题？

Answer 1

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

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 是 block 作用域的，因此这就是它们在您的示例中不起作用的原因。

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

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