Question

我不确定原因，但如果我在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

的警告

我该如何解决这个问题？

Answer 1

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

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`

正如其他评论/答案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

替代方法（虽然不确定是 good 还是 elegant ）：

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

Answer 4

请勿使用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。

Answer 5

let和const是块级范围的，因此您必须在块之外定义它们。 var因为它升起而起作用。

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

或

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

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

Answer 6

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 ]

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

这也进行了一些清理，该类使用了两次，只有circularBorder是区别...

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

7 个答案: