reactのフックについて

Question

material-uiのサンプルコードをクラスで包んでexportして使おうと思ったのですが、Invalid hook callのエラーが出てしまいました。
フックとはどのようなものでしょうか？この場合どのようにすればエラーを回避できますか？

発生している問題・エラーメッセージ

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

該当のソースコード

import React from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

export default class Header extends React.Component {
  useStyles = makeStyles((theme: Theme) =>
    createStyles({
      root: {
        flexGrow: 1,
        color: "#388e3c",
        backgroundColor: "#81c784",
      },
      menuButton: {
        marginRight: theme.spacing(2),
      },
      title: {
        flexGrow: 1,
        textAlign: "center",
      },
    })
  );

  renderHeader() {
    const classes = this.useStyles();
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="menu"
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              test
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  render() {
    return <div>{this.renderHeader()}</div>;
  }
}

試したこと

フックはクラス内では使えないということなので、useStyles をクラスの外に出してみたのですが、クラス内にどうやって引っ張ってくればいいかわかりません。

Answer 1

フックはクラス内では使えないということなので、useStyles をクラスの外に出してみたのですが

いえ、フックは関数コンポーネント内でしか使えません。

クラス内にどうやって引っ張ってくればいいかわかりません。

クラスコンポーネントのまま使う方法はありません。

Comments

[maisumakun]

Hooks can only be called inside of the body of a function component.と、元のエラーメッセージのもあります。

[masa112m]

エラーメッセージよく読めばよかったんですね。ありがとうございます。

[masa112m]

エラーメッセージよく読めばよかったんですね。ありがとうございます。