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

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

备选方案（虽然不确定是否很好，也不优雅）：

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

也看看凌乱的类名构造。