如何使用makeStyles设置组件样式并在Material UI中仍然具有生命周期方法?

每当我尝试使用makeStyles()具有生命周期方法的组件时,都会出现以下错误

无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生:

  1. 您可能使用了不匹配的React和渲染器版本(例如React DOM)
  2. 您可能正在违反钩子规则
  3. 您可能在同一应用程序中拥有多个React副本

以下是产生此错误的代码的一个小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles并能够使用生命周期方法的内容。

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';

    import { Container, makeStyles } from '@material-ui/core';

    import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

    const useStyles = makeStyles(theme => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
    }));

    const classes = useStyles();

    class Welcome extends Component {
      render() {
        if (this.props.auth.isAuthenticated()) {
          return <Redirect to="/" />;
        }
        return (
          <Container maxWidth={false} className={classes.root}>
            <LogoButtonCard
              buttonText="Enter"
              headerText="Welcome to PlatformX"
              buttonAction={this.props.auth.login}
            />
          </Container>
        );
      }
    }

    export default Welcome;
Harry猴子A2020/03/17 12:01:47

除了将类转换为函数外,一个简单的步骤是为包含使用“类”的组件的jsx创建一个函数(在您的情况下为)<container></container>,然后在类render()的返回内部调用此函数。作为标签。这样,您就可以从类中移出函数。它对我来说非常有效。就我而言,这是<table>我将其移至函数TableStmt外部并在render内部将该函数称为<TableStmt/>

卡卡西神奇2020/03/17 12:01:47

useStyles is a React hook which are meant to be used in functional components and can not be used in class components.

From React:

Hooks let you use state and other React features without writing a class.

Also you should call useStyles hook inside your function like;

function Welcome() {
  const classes = useStyles();
...

如果要使用钩子,这是将您的简短类组件更改为功能组件;

import React from "react";
import { Container, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

function Welcome() {
  const classes = useStyles();
  return (
    <Container className={classes.root}>
      <h1>Welcome</h1>
    </Container>
  );
}

export default Welcome;

🏓在↓CodeSandBox↓上

编辑React钩子