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

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

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

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

Q&A

解決済

1回答

791閲覧

defaultPropsやpropTypesに関して。

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

0クリップ

投稿2019/09/13 16:33

前提・実現したいこと

こちらのサイトのreact-rails gemを使う方法で、
Reactセットアップまではできたのですが、
デフォルトで用意されたHello.jsxがリンク先とは違っていて、
Reactのコードが理解できなかったのでご教示お願いします。

該当のソースコード

デフォルトで用意されたHello.jsxが下記でした。

import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' const Hello = props => ( <div>Hello {props.name}!</div> ) Hello.defaultProps = { name: 'David' } Hello.propTypes = { name: PropTypes.string } document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <Hello name="React" />, document.body.appendChild(document.createElement('div')), ) })

試したこと

application.html.erbに<%= javascript_pack_tag 'hello_react' %>を追加すると、
「Hello React」のdivタグが追加されたのは確認できました。

これはおそらく、<Hello name="React" />が効いて、「Hello React」の表示になっているかと思うのですが、
下記のコード辺りが特にわからないです。

Hello.defaultProps = { name: 'David' } Hello.propTypes = { name: PropTypes.string }

・質問1。
コードから察するに、「Hello David」とも表示できそうですが、どうすれば表示できますか?

・質問2。

Hello.propTypes = { name: PropTypes.string }

これは何かの設定ですか?
必要な処理ですか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

・質問1。

コードから察するに、「Hello David」とも表示できそうですが、どうすれば表示できますか?

<Hello />のようにnameを渡さなければ、defaultProps.nameにある"David"が利用されます。

これは何かの設定ですか?

必要な処理ですか?

型チェックを行うための設定です。動作させるためには不要ですが、開発中にはpropTypeに合わない引数を渡すと警告が出ます。

投稿2019/09/14 00:18

maisumakun

総合スコア145121

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

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

退会済みユーザー

退会済みユーザー

2019/09/14 09:17

ご回答ありがとうございます。 Davidが出力されるのを確認しました。 propTypeのご説明もありがとうございました。 理解できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問