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

IT技术 javascript if-statement reactjs constants let
2021-05-03 16:37:01

我不知道为什么，但如果我在语句中声明它们，似乎我不能调用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。

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

我怎么能解决这个问题？

4个回答

您应该使用三元赋值：

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`

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

替代方案（虽然不确定它是否好也不优雅）：

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

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

也看看凌乱的类名构造。

其它你可能感兴趣的问题
上一篇根据 React.Js 中第一个下拉列表的选择填充第二个下拉列表 下一篇使用 React 获取图像的尺寸