javascript - React类实现中Uncaught Invariant Violation : Invalid hook call.问题

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>
  );
}

这是我的 React 类风格的翻译代码。

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';
import MaterialTableDemo from './Table';
import Chart from './Chart';

// Define the styling of the tab component. The background of the
// displayed content is defined to be the paper color.
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

function TabContainer(props) {
  return (
    <Typography component="div" style={ { padding: 8 * 3} }>
      { props.children }
    </Typography>
  )
};

// TabContainer.propTypes = {
//   children: PropTypes.node.isRequired,
// };


class Main extends React.Component {
  constructor(props) {
    // Inherit whatever props are given to it in the tag definition
    super(props);
    // Declaration of the state variable if needed
    this.state =  {
      displayState: 0, // define the beginning state of the
      // tab component
    };
    // Declaration of some member functions, some of whic
    // return render-able HTML format code.
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(newValue) {
    this.setState( { displayState: newValue } )
  }

  // propTypes method only for debugging purposes.
  // Will check for any inconsistencies. If a prop is required to be
  // a node, but is not a node, will raise a warning/error.


  render() {
    const classes = useStyles();
    return (
      <div className={classes.root}>
        <AppBar position="static" >
          <Tabs value={this.state.displayState} onChange={this.handleChange}>
            <Tab label="Chart" />
            <Tab label="Table" />
          </Tabs>
        </AppBar>
        {this.state.displayState === 0 && <TabContainer> <Chart/> </TabContainer>}
        {this.state.displayState === 1 && <TabContainer> <MaterialTableDemo/> </TabContainer>}
      </div>
    );
  }
}
export default Main;

我希望它运行并显示一个包含所需内容的选项卡。现在只是显示文本的虚拟组件。

当前错误是

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [website deleted] for tips about how to debug and fix this problem.

Answer 1

错误发生是因为 useStyles() 有 makeStyles 是一个 react-hook 而你不能使用 react -hooks 在类组件中。正如您在示例中看到的那样，它使用的是功能组件。

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