Reactjs 使用 if else 来声明要在 ifelse 之后使用的 `let` 或 `const`

发布于11月30日

我不知道为什么，但如果我在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的警告

我怎样才能解决这个问题？

推荐答案

你应该使用三元赋值:

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 /答案中所述，let和const在范围内被屏蔽，这就是为什么它们在您的示例中不起作用.

对于DRIER代码，还可以将三元字符串嵌套在字符串文字中:

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

Reactjs 使用 if else 来声明要在 ifelse 之后使用的 `let` 或 `const`

推荐答案

Reactjs相关问答推荐

使用TEK查询时与Redux状态中存储的其他属性混淆

MUImaterial -ui-如何将文本字段和 Select 分组？

无法覆盖MUI工具栏上的左右填充，除非使用！重要

是否可能有不同的加载器用于路径有查询参数和没有查询参数，或者在React Router 6中添加它们时有条件地跳过一个加载器？

导致类型错误的调度不是函数"；

如何防止使用useCallback和memo重新渲染

两条react 路由的行为不同.有没有人能解释一下，我已经找了好几天了

禁止直接访问Next.js中的页面，同时允许从应用程序内部访问

MUI：在props 主题中找到的值：；错误；是[Object]，而不是字符串或数字

React路由dom布局隐藏内容

使用 React + Vite 范围化 CSS

如何在 TimePicker 中更改时钟 colored颜色和确定按钮字体 colored颜色 - MUI React

为什么在 React 的 useEffect 中使用 onAuthStateChanged ？

useRef.current.value 为空值

Zod 验证模式根据另一个数组字段使字段成为必需字段

antd 找不到 comments

当我在 useEffect 中使用 useDispatch 时，我的组件继续渲染

将复杂状态和 setState 传递给更简单的 api

ReactJs 行和列

将 dict 值转换并插入到react 钩子的列表中