File tree Expand file tree Collapse file tree 1 file changed +5
-6
lines changed Expand file tree Collapse file tree 1 file changed +5
-6
lines changed Original file line number Diff line number Diff line change @@ -41,14 +41,13 @@ JSON のデータモデルをユーザーに向けて表示することはよく
41
41
42
42
![ コンポーネント図] ( ../images/blog/thinking-in-react-components.png )
43
43
44
- 5 種類のコンポーネントがこのシンプルなアプリの中にあることが見て取れます。それぞれの解説の中で、データを表すものについては斜体にしました。
45
- <!-- nkzn注: 日本語フォントは斜体を表現できないことが多いので、別の表現でマークアップしたほうがいいかもしれない => #22 で対応予定 -->
44
+ 5 種類のコンポーネントがこのシンプルなアプリの中にあることが見て取れます。それぞれの解説の中で、データを表すものについては** 太字** にしました。
46
45
47
46
1 . ** ` FilterableProductTable ` (オレンジ色):** このサンプル全体を含む
48
- 2 . ** ` SearchBar ` (青色):** すべての * ユーザー入力* を受け付ける
49
- 3 . ** ` ProductTable ` (緑色):** * ユーザー入力* に基づく * データの集合* を表示・フィルタする
50
- 4 . ** ` ProductCategoryRow ` (水色):** * カテゴリ* を見出しとして表示する
51
- 5 . ** ` ProductRow ` (赤色):** 各 * 商品* を 1 行で表示する
47
+ 2 . ** ` SearchBar ` (青色):** すべての* ユーザー入力* を受け付ける
48
+ 3 . ** ` ProductTable ` (緑色):** * ユーザー入力* に基づく* データの集合* を表示・フィルタする
49
+ 4 . ** ` ProductCategoryRow ` (水色):** * カテゴリ* を見出しとして表示する
50
+ 5 . ** ` ProductRow ` (赤色):** 各* 商品* を 1 行で表示する
52
51
53
52
` ProductTable ` を見てみると、表のヘッダー(「Name」や「Price」のラベルを含む)が単独のコンポーネントになっていないことがわかります。これは好みの問題で、コンポーネントにするかしないかは両論あります。今回の例でいえば、ヘッダーを ` ProductTable ` の一部にしたのは、* データの集合* を描画するという ` ProductTable ` の責務の一環として適切だったからです。しかしながら、将来ヘッダーが肥大化して複雑になった場合(例えばソート機能を追加した場合など)は、` ProductTableHeader ` のようなコンポーネントにするのが適切になるでしょう。
54
53
You can’t perform that action at this time.
0 commit comments