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

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

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

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

React.js

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

Q&A

解決済

1回答

2817閲覧

React.createElement: type should not be null, undefined, boolean, or number. というエラーが発生する

tal

総合スコア20

JavaScript

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

React.js

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

0グッド

1クリップ

投稿2016/07/02 06:31

React.jsで下記のコードを書いてエラーになります。
CSS等は間に記述がありますが、省略しています。
解決法がわからないのですが、ご教授いただけますでしょうか。

JavaScript

1import React, { Component, PropTypes } from 'react'; 2import { Link } from 'react-router' 3import { connect } from 'react-redux'; 4import { bindActionCreators } from 'redux'; 5import { increment } from '../actions/app'; 6import styles from '../main.css'; 7import App from '../components/app'; 8 9/// この辺りにCSS等の記述がある 10 11export default class TopContainer extends Component{ 12 13render(){ 14console.log("render top") 15 return( 16 <div> 17 <Link to="/">トップページ</Link> 18 <App /> 19 </div> 20 ); 21} 22};

/components/app

JavaScript

1import React, {Component} from 'react'; 2 3class App extends React.Component { 4 5 render() { 6 return ( 7 <div> 8 <span>{this.props.fuga}</span> 9 <button onClick={ () => this.props.handleClick() }>増加</button> 10 </div> 11 ) 12 }; 13}; 14

このあたりを見て上記に修正してみたものの解決できておりません。
https://github.com/reactjs/react-router/issues/2220

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

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

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

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

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

guest

回答1

0

ベストアンサー

二つ目のclass App ...のの所はexport default class App ...ではないでしょうか?
Appがexportされないため、Appが正しくセットされていないのでは?

投稿2016/07/02 06:40

raccy

総合スコア21733

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

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

tal

2016/07/02 06:54

ご回答いただきありがとうございます。 `export default class App extends Component {` に変更してみましたが、エラーメッセージは変りませんでした。 bundle.js:9188 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
raccy

2016/07/02 07:02

変換後の"bundle.js"の9188行目ってどうなっていますでしょうか?もとのコードのどの行でエラーになっているのかいまいち掴めないです。
tal

2016/07/02 07:12 編集

bundle.js:9188 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `TopContainer`. `Check the render method of `TopContainer`. 申し訳ございません。と書かれているので一番最初にご質問させていただいたTopContainerのrenderメソッドでエラーが起きているという認識でした。 bundle.jsでいうとここで止まっています。 if (typeof console !== 'undefined') { console.error(message); }
raccy

2016/07/02 07:50

Recatが作成しているエラーメッセージだから、行見てもわからないって事ですね。 とりあえず、TopCotainairのrender()のところの最初に console.log(Link); console.log(App); としてみて、この二つがundefinedとかになっていないか確認してみて下さい。あとありえるのは、importの"../common/app"のパスが間違っているとかでしょうか…。
tal

2016/07/02 09:00

console.log(Link); console.log(App); などを入れてデバックしながら、components記述のあった場所を入れ替えたりしていたら何故か読み込めました...。もしかしたらtypoしていたり気づかなかったかもしれません。この度は丁寧におつきあいくださいまして有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問