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

Question

我正在为 Material UI 标签实施 React Class。我本质上是从 material ui 网站获取标签示例，并将其转换为 class 兼容格式。他们网站上的示例如下：

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 classes 风格的翻译代码。

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 并且你不能在 class 组件中使用 react-hooks。正如您在示例中看到的那样，它使用的是功能组件。

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

Answer 2

如您提供的例外情况所述：

Hooks can only be called inside of the body of a function component

这当然意味着不支持在 class 组件中使用挂钩。

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

Uncaught Invariant Violation: Invalid hook call. Problem in React Class Implementation

javascript

reactjs

react-hooks