質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1950閲覧

reactのフックについて

masa112m

総合スコア21

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/06/05 09:24

編集2020/06/05 09:42

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

該当のソースコード

typescript

1import React from "react"; 2import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; 3import AppBar from "@material-ui/core/AppBar"; 4import Toolbar from "@material-ui/core/Toolbar"; 5import Typography from "@material-ui/core/Typography"; 6import Button from "@material-ui/core/Button"; 7import IconButton from "@material-ui/core/IconButton"; 8import MenuIcon from "@material-ui/icons/Menu"; 9 10export default class Header extends React.Component { 11 useStyles = makeStyles((theme: Theme) => 12 createStyles({ 13 root: { 14 flexGrow: 1, 15 color: "#388e3c", 16 backgroundColor: "#81c784", 17 }, 18 menuButton: { 19 marginRight: theme.spacing(2), 20 }, 21 title: { 22 flexGrow: 1, 23 textAlign: "center", 24 }, 25 }) 26 ); 27 28 renderHeader() { 29 const classes = this.useStyles(); 30 return ( 31 <div className={classes.root}> 32 <AppBar position="static"> 33 <Toolbar> 34 <IconButton 35 edge="start" 36 className={classes.menuButton} 37 color="inherit" 38 aria-label="menu" 39 > 40 <MenuIcon /> 41 </IconButton> 42 <Typography variant="h6" className={classes.title}> 43 test 44 </Typography> 45 <Button color="inherit">Login</Button> 46 </Toolbar> 47 </AppBar> 48 </div> 49 ); 50 } 51 render() { 52 return <div>{this.renderHeader()}</div>; 53 } 54} 55

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

投稿2020/06/05 10:17

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/06/05 10:21

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

2020/06/05 10:23

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

2020/06/05 10:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問