Question

我正在为材质UI选项卡实现React类。实际上，我以材料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 (

Answer 2

如您提供的例外中所述：

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

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

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

2 个答案: