未捕获的不变违规：无效的挂钩调用。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() {

    const classes = useStyles(); // here is a react-hook that can't be used in class components

    return (

Answer 2

如您提供的例外中所述：

Hooks 只能在函数组件内部调用

当然，这意味着不支持在类组件中使用钩子。