React封装Material UI Collapse组件报错useStyles未初始化如何解决？

报错原因 #

1. 变量声明顺序违反JS语法规则：你在抽离的CollapseBtn组件内部先执行了const classes = useStyles()，之后才通过const useStyles = makeStyles(...)定义useStyles变量。const声明的变量存在暂时性死区，在声明语句之前访问变量会直接抛出该引用错误。
2. 额外不规范写法：
   • makeStyles生成的样式hook不允许定义在组件内部，每次组件重渲染都会重复生成样式实例，会导致性能损耗和样式异常
   • 抽离的CollapseBtn组件遗漏了必须的依赖导入：makeStyles、IconButton、clsx、React，修复顺序后还会触发其他引用错误

修复方案 #

替换CollapseBtn组件的代码为以下内容即可：

import React from 'react';
import Collapse from "@material-ui/core/Collapse";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";

// 样式hook定义在组件外部
const useStyles = makeStyles((theme) => ({
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
}));

const CollapseBtn = ({ children }) => {
  const [expanded, setExpanded] = React.useState(false);
  // 先完成useStyles定义再调用
  const classes = useStyles();

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <>
      <IconButton
        className={clsx(classes.expand, {
          [classes.expandOpen]: expanded,
        })}
        onClick={handleExpandClick}
        aria-expanded={expanded}
        aria-label="show more"
      >
        <ExpandMoreIcon />
      </IconButton>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        {children}
      </Collapse>
    </>
  );
};

export default CollapseBtn;

内容的提问来源于stack exchange，提问作者P H