我尝试在类组件中使用 const useStyles答案

【问题标题】：I try to use const useStyles in class component我尝试在类组件中使用 const useStyles
【发布时间】：2020-03-12 12:19:41
【问题描述】：

现在，我用 React 框架和 Material-UI 的库做一个项目。

我的模板来自https://material-ui.com/getting-started/templates/ --> 唱歌

我将组件从函数组件更改为类组件以使用 this.state。因为我想从键盘获取值。但我不能。

错了

enter image description here

这是我的代码

const useStyles = makeStyles(theme => ({
   root: {
      flexGrow: 1,
   },
}));

class Signin extends Component {
   constructor(props) {
       super(props);
       this.state = {
          username: "",
          password: "",
          redirectToReferrer: false,
          message: null
        }
   }
   render() {
      const { redirectToReferrer } = this.state;
      const { classes } = this.props;
      if (redirectToReferrer) return <Redirect to="/routebasic" />;
        return (
          <div className={classes.root}>
    }}
    Signin.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

当我编辑导出默认为

export default makeStyles(useStyles)(Signin);

仍然是错误。

【问题讨论】：

标签： javascript node.js reactjs material-ui

【解决方案1】：

是的，它会出错。有一些（非常老套的）方法可以让钩子与类一起工作，但您不需要使用类来获得状态。只使用函数组件比尝试破解 React 更容易。

我将组件从函数组件更改为类组件以使用 this.state。因为我想从键盘获取值。

作为一个例子（我在这里猜测，因为我不知道上下文，并且我已经拆分了对象而不是将其保留为单个值）：

const Signin = ({ classes }) => {
   const [username, setUsername] = React.useState("kmitlclinic01");
   const [password, setPassword] = React.useState("54788");
   const [redirectToReferrer, setRedirectToReferrer] = React.useState(false);
   const [message, setMessage] = React.useState("kmitlclinic01");

   if (redirectToReferrer) return <Redirect to="/routebasic" />;
   return (
     <div className={classes.root}>
       {/* I assume some stuff goes here? */}
     </div>
   );
}

export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

【讨论】：