React.js入門

コンポーネントのプロパティを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンポーネントが同じでも異なるプロパティ値を与えると、表示を変えることができます。
講師:
07:29

字幕

このレッスンではコンポーネントにプロパティを与えることによって同じコンポーネントから作った要素であっても表示する中身を変えてみたいと思います。今開いている JavaScript ファイルですが親のコンポーネントがこの CommentBox です。その中に2つのこのコンポーネントを差し込んでいてCommentList ですね、これは div 要素の中にコメントリストを表示、それから CommentForm の方ですがこちらも形はまったく同じです。div 要素の中で CommentForm を表示ということになっています。それを GetElementByIdid が content という要素の中に子供として差し込むということですね。HTML ドキュメントの方を見ますとReact のライブラリとコンパイルするラベル、それからこの script、外部 JavaScript ファイルの読み込みですね。div 要素に id=content が定められています。現在の表示はこのような感じです。「ファイル」>「ブラウザーでプレビュー」してFirefox で確認します。親コンポーネントがあってh1 のタイトルですけれどもそこに2つのコンポーネント子供のコンポーネントの表示がされています。 では子供のコンポーネントのうちCommentList ですね、こちらを内容を少し変えていきたいと思います。ここにまた新たにさらに子供のコンポーネントを作ります。Comment です。とりあえず閉じておきましょう。そしてここにはもう少し書き加えますけれどもまずはこのコメントというコンポーネント、クラスですね。これを大枠を作ってしまいます。Comment というクラスでReact.createClass ですね。これをコピーを持っていきまして、中括弧閉じ丸括弧閉じと。そして形はもう一緒ですのでrender で function で return をすると。コピーを持って来ます。return の丸括弧を閉じてそして function の中括弧を閉じます。ではここに return する内容ですね、これを jsx で書いていきます。まずは div 要素です。そして ClassName。これは class の名前を持って来ると。そして div を閉じます。その中に実際の中身なんですがh2 でタイトル付けをしてそしてここにテキストを入れたいと思います。どんなテキストかということなんですが実は表示したいデータが2件ありまして、コピーしましょう。 コピーしてとりあえず仮にということでペーストします。どうしたいかというとこの名前ですね、名前を h2 に入れてそしてこの文章、短い文ですがそれをここに持ってくるというふうにしたいわけです。1件だったらこれで良いでしょう。もう1件あるんですね。もちろんまた h2 でこのタイトル名前を入れてテキストを入れるということもできます。けれどもそうするとデータが増えたりあるいは変更される度に一々ここを書きなおさないといけませんね。そうではなくて同じこの Comment というコンポーネントは変えずにこの親のコンポーネントで定義しているこのタグ、Comment というタグに値を持って来るという方法があります。そして今度はこの名前の方ですがこの Comment というコンポーネントにプロパティを与えます。プロパティを属性のように書くことができるんですね。名前は自由です。今回は author とします。属性と同じ書き方ですから、ここに名前を持って来ると。そうすると同じ Comment というコンポーネントを使いながら値を変えることができるんですね。そうしたらこの名前をカットしてペーストです。この文章をカットしてペーストと。 そしてこのコンポーネントのクラス定義ですね、createClass ここは同じ形にしてしまうことができます。どうしてかというと、これらの値をこのクラスからアクセスして取り出すことができるんですね。ではまずこの名前の部分です。何にしてもこの Comment というコンポーネントに対して与えられたプロパティいくつあってもいいんですがそれらにアクセスするにはprops というプロパティを使います。ここは JavaScript コードなので波括弧で囲みます。その中に「このコンポーネント」という意味の this.propsこれでコンポーネントに設定されたプロパティとかあるいはこのテキストにアクセスすることができます。ではまずプロパティですね、これは単純にこのプロパティ名を持ってくれば結構です。ちょっと位置が変わっちゃいましたね。そして今度はこのテキストを持って来たいんですがテキストはこれはプロパティではないですね。このコンポーネントの子供です。そういう場合には this.props.キ―ワードは決まっていましてchildren です。children の d が抜けています。保存しましてそして HTML の方に切り替えます。 「ファイル」>「ブラウザーでプレビュー」でFirefox です。2件ですね。名前とテキスト、名前とテキストと。このコメントフォームの部分は変更していませんのでまったく変わりがありません。このレッスンでは親のコンポーネントから子供のコンポーネントにプロパティやテキストを与えそれを子供のコンポーネントからアクセスして要素の中に表示するという方法についてご説明しました。その場合には親から与えられたプロパティについてはthis.props でアクセスしプロパティ名あるいは子供のテキストであれば children というキーワードでアクセスできるということです。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。