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

如果我使用此代码，它会显示 classes is not defined.

但是如果我将 const 更改为 var 类已定义但我会收到有关 classes used outside of binding context 和 all var declarations must be at the top of the function scope

的警告

我该如何解决这个问题？

Answer 1

let 和 const 是块级范围的，这意味着它们只能在它们在 ie 中定义的块内使用。 { // 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`;
}

Answer 2

你应该使用三元赋值：

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`

如其他 comments/answers 中所指定，let 和 const 是被阻止的范围，因此它们在您的示例中不起作用。

对于 DRYer 代码，您还可以将三元嵌套在字符串文字中：

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

Answer 3

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

另请参阅。

Answer 4

let 和 const 是块级范围的，因此您必须在块外定义它们。 var 之所以有效，是因为它吊了出来。

您可以在 if 块之前定义 classes，例如

或

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

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

Answer 5

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

在这种特殊情况下，字符串也很长，所以我也会将它们抽象出来。 Bergi 方式的问题是，出于一致性原因，大多数 linter 会削弱他的风格。

如果您熟悉三元组，这种方式可以使一切保持正常且易于阅读。

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 ]

Answer 6

另类（不确定它是好还是优雅）：

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

Answer 7

简单，只需这样做：

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

这也有一些清理，class 使用了两次，只有 circularBorder 是区别...

使用 if else 来声明一个 `let` 或 `const` 在 if/else 之后使用？

Use if else to declare a `let` or `const` to use after the if/else?

javascript

if-statement

constants

let

reactjs