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

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

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

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

Q&A

解決済

1回答

10927閲覧

Reactで何も画面に表示されない

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

0クリップ

投稿2018/06/24 07:50

編集2018/06/24 09:03

画面にHello Worldを表示させたいのですが、何も表示されません。

コードは以下の通りになります。
よろしくお願いします。

エラーが出ていたので書いておきます。

index.js:2178 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in Color (at App.js:8) in App (at index.js:7)

App.js

import React, { Component } from 'react'; import './App.css'; import Color from './Color' class App extends Component { render() { return ( <Color /> ); } } export default App;

Color.js

import React, {Component} from 'react'; class Color extends Component { render () { return ( function Color() { return <p>hello world!</p>; } ); } } export default Color

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラーが出ていたので書いておきます。

Warning: Functions are not valid as a React child.

return ( function Color() { return <p>hello world!</p>; } );

Warningメッセージで言われている通り、関数をコンポーネントのrenderメソッドの中で返すことは出来ません。

return ( <p>hello world!</p> );

こうすればWarningも消えるはずです。

class Color extends Component { hello() { return <p>hello world!</p> } render() { return ( this.hello() ) } }

または、このようにメソッド化して、renderメソッドの中で実行してあげるのもOKです。

https://codesandbox.io/s/my7knjq4p9

投稿2018/06/24 09:44

編集2018/06/24 09:49
HayatoKamono

総合スコア2415

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

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

退会済みユーザー

退会済みユーザー

2018/06/24 10:26

おっしゃる通りでした! ありがとうございます! あともう一つお伺いしたいのですが、Hello.jsの1行目に対して、`'Component' is defined but never used no-unused-vars`という警告が出るのですが、これはどうすればよいでしょうか?
HayatoKamono

2018/06/24 14:15 編集

hello.jsのコードを掲載頂いてないので確実なことは言えませんが、そのwarningはComponentという変数が定義されてるけど未使用の場合に出るwarningなのですが、hello.jsの中ではComponentを読み込んではいるけど使ってはいないのではないでしょうか? import React, {Component} from 'react'; を import React from 'react'; に、hello.jsで変えれば良いかと思います。コード掲載されてないので確実な回答ではないですが。
退会済みユーザー

退会済みユーザー

2018/06/25 05:25

おっしゃる通りに書いてみると警告が消えました! ただ、`import React, {Component} from 'react';`の`{Component}を勝手に消してしまって大丈夫なのでしょうか?
HayatoKamono

2018/06/25 05:51

そのhello.js内で`Component`を使っていないのであれば、読み込む必要はないので消してOKです。それを消すことでエラーにならないということは、そのファイル内では使っていないということなはずなので、大丈夫ですよ!
退会済みユーザー

退会済みユーザー

2018/06/25 06:05

そうなのですね! 理解しました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問