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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

1503閲覧

Rect(Javascript)でのエラー

motikei55

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

1グッド

0クリップ

投稿2018/02/09 14:29

前提・実現したいこと

親と子クラスを定義(extends)して使用したいのですがconstructor内でエラーが発生してしまう。また、以下がよく理解できていないため教えてください。
export default withStyles(styles)(Parent);

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

TypeError: Unable to get property '64a55d578f856d258dc345b094a2a2b3' of undefined or null reference

該当のソースコード

【Parent.js】 import React from 'react'; import { withStyles } from 'material-ui/styles'; const styles = { root: { backgroundColor: 'red', }, }; class Parent extends React.Component { constructor(props){ super(props); } render () { return <div className={this.props.classes.root} />; } } export default withStyles(styles)(Parent); 【Child.js】 import Parent from './Parent'; class Child extends Parent { constructor(props){ super(props); } } export default Child; 【index.js】 import React from 'react'; import Child from './Child'; ReactDOM.render(<Child/>, document.getElementById('root'));

試したこと

親と子のconstructorを削除すると発生しない。
export default Parent;に変更すると発生しない。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

mpyw👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

export default withStyles(styles)(Parent);
こちらはHigh order Component(以下 HoC)と言われるComponentでParentとは異なったReactのClassとなってしまっています。
ここをexport defaultしているため、このParentと異なったClassのみがChildではimportされています。
そして想定と違うClassを継承し、constructしようとしているためエラーとなってしまっているようです。

HoCはちょっと簡単に説明するのも難しいところがありますので、参考になるかと思われるリンクを掲載いたします。
https://qiita.com/numanomanu/items/2b66d8b2887d44f857dc

そしてこの問題を解決する方法ですが、 ParentはクラスのみをExportしてChiltでHoC化すれば良さそうです。

js

1import React from 'react'; 2export default class Parent extends React.Component { 3 constructor(props){ 4 super(props); 5 } 6 render () { 7 return <div className={this.props.classes.root} />; 8 } 9}

js

1import { withStyles } from 'material-ui/styles'; 2 3import Parent from './Parent'; 4 5const styles = { 6 root: { 7 backgroundColor: 'red', 8 }, 9}; 10 11class Child extends Parent { 12 constructor(props){ 13 super(props); 14 } 15} 16export default withStyles(styles)(Child); 17

Parentの方でHoCをExportして継承は無理だと思います。

投稿2018/02/09 15:05

sakapun

総合スコア888

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

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

motikei55

2018/02/10 03:55

分かりやすい解説ありがとうございました。 exportの箇所はParentコンポを引数とした関数呼び出しで復帰値をExportしていたと理解しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問