未捕获的不变违规：无效的挂钩调用。React 类实现中的问题

Question

我正在为 Material UI 选项卡实现一个 React 类。我基本上从 material ui 网站中获取了选项卡的示例，并将其转换为类兼容格式。他们网站上的例子如下：

import React from 'react';

import PropTypes from 'prop-types';

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

import AppBar from '@material-ui/core/AppBar';

import Tabs from '@material-ui/core/Tabs';

import Tab from '@material-ui/core/Tab';

import Typography from '@material-ui/core/Typography';

function TabContainer(props) {

  return (

    <Typography component="div" style={{ padding: 8 * 3 }}>

      {props.children}

    </Typography>

  );

}

TabContainer.propTypes = {

  children: PropTypes.node.isRequired,

};

const useStyles = makeStyles(theme => ({

  root: {

    flexGrow: 1,

    backgroundColor: theme.palette.background.paper,

  },

}));

export default function SimpleTabs() {

  const classes = useStyles();

  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {

    setValue(newValue);

  }

  return (

    <div className={classes.root}>

      <AppBar position="static">

        <Tabs value={value} onChange={handleChange}>

          <Tab label="Item One" />

          <Tab label="Item Two" />

          <Tab label="Item Three" />

        </Tabs>

      </AppBar>

      {value === 0 && <TabContainer>Item One</TabContainer>}

      {value === 1 && <TabContainer>Item Two</TabContainer>}

      {value === 2 && <TabContainer>Item Three</TabContainer>}

    </div>

  );

}

Answer 1

发生错误是因为useStyles()它makeStyles是 areact-hook并且您不能react-hooks在类组件中使用。正如您在示例中看到的，它使用了功能组件。render() {&nbsp; &nbsp; const classes = useStyles(); // here is a react-hook that can't be used in class components&nbsp; &nbsp; return (

Answer 2

如您提供的例外中所述：Hooks 只能在函数组件内部调用当然，这意味着不支持在类组件中使用钩子。