未捕获的不变冲突:无效的挂钩调用.反应类实现中的问题

Question

我正在为Material UI Tabs实现一个React Class。我基本上以材料 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

发生此错误是因为具有makeStyles的useStyles()是react-hook，并且您不能在类组件中使用react-hooks。正如您在示例中所看到的，它使用的是功能组件。

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

Answer 2

如您提供的异常中所述：

钩子只能在函数组件的主体内部调用

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