{"parents":["e695ebb5c65c336d53f25324a2e0f6b16673612d"],"files":[{"status":"A","path":"docs\/docs\/04-multiple-components.ja-JP.md"}],"patch":"diff --git a\/docs\/docs\/04-multiple-components.ja-JP.md b\/docs\/docs\/04-multiple-components.ja-JP.md\nnew file mode 100644\nindex 0000000000..809d3a0c60\n--- \/dev\/null\n+++ b\/docs\/docs\/04-multiple-components.ja-JP.md\n@@ -0,0 +1,186 @@\n+---\n+id: multiple-components\n+title: 複数のコンポーネント\n+permalink: multiple-components-ja-JP.html\n+prev: interactivity-and-dynamic-uis-ja-JP.html\n+next: reusable-components-ja-JP.html\n+---\n+\n+今まで、データを表示したりユーザの入力をハンドルするための1つのコンポーネントの書き方を見てきました。次に、 Reactの最も面白い特徴であるコンポーザビリティについて見ていきましょう。\n+\n+## 動機: 関心の分離\n+\n+うまく定義されたインターフェースとともに他のコンポーネントを再利用するモジュールのコンポーネントを構築することによって、関数やクラスを使う場合と同じ利益を得ることができます。特に、アプリの *異なった関心を分離* できるにも関わらず、新しいコンポーネントを単純に構築することで満足する場合には。アプリケーションにカスタムコンポーネントライブラリを構築することによって、あなたがやりたいことに最も合う方法でUIを表現することができます。\n+\n+## 構成例\n+\n+FacebookのグラフAPIを使って、プロフィール画像とユーザー名を表示する単純なアバターのコンポーネントを作ってみましょう。\n+\n+```javascript\n+var Avatar = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+});\n+\n+var ProfilePic = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ );\n+ }\n+});\n+\n+var ProfileLink = React.createClass({\n+ render: function() {\n+ return (\n+ \n+ {this.props.username}\n+ <\/a>\n+ );\n+ }\n+});\n+\n+React.render(\n+ ,\n+ document.getElementById('example')\n+);\n+```\n+\n+\n+## 所有\n+\n+上記の例では、 `Avatar` のインスタンスは `ProfilePic` と `ProfileLink` のインスタンスを *所有* しています。Reactでは、 **所有者は、他のコンポーネントの `props` をセットするコンポーネントです。** 正式に言うと、もし `Y` コンポーネントの `render()` メソッドの中に `X` コンポーネントが作られた場合、 `X` は `Y` に所有されていると言います。以前述べたように、コンポーネントはそれ自身の `props` を変化させることはできません。 `props` は常に、所有者が彼らにセットしたものと一貫性があります。このキー要素は一貫性があることを保証するために、UIに反映されます。\n+\n+所有者と所有される側の関係と、親子の関係の違いを示すのは重要です。所有者と所有される側の関係はReact独特です。一方で、親子の関係は単純にDOMから分かる、愛すべき関係です。上の例では、 `Avatar` は `div` を所有しますが、 `ProfilePic` と `ProfileLink` インスタンスと、 `div` は `ProfilePic` と `ProfileLink`インスタンスの **親** (しかし、所有者ではありません)です。\n+\n+\n+## 子\n+\n+Reactのコンポーネントのインスタンスを作成する時には、以下のように開始タグと終了タグの間に付加的なReactのコンポーネントやJavaScriptの表現を含めることができます。\n+\n+```javascript\n+<\/Parent>\n+```\n+\n+`Parent` は特別な `this.props.children` というプロパティでアクセスすることで、子要素を読み取ることができます。 **`this.props.children` は不透明なデータ構造です。** 操作するには[React.Children utilities](\/react\/docs\/top-level-api.html#react.children)を使用してください。\n+\n+\n+### 子要素の調和\n+\n+**調和はReactが新しいレンダリングのパスごとにDOMをアップデートするプロセスです。** 一般的に、子要素はレンダリングされる順序に従って調和します。例えば、2つのレンダリングパスを考えると、以下のそれぞれのマークアップが生成されます。\n+\n+```html\n+\/\/ パス1のレンダリング\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+\/\/ パス2のレンダリング\n+\n+

Paragraph 2<\/p>\n+<\/Card>\n+```\n+\n+直感的には、 `

Paragraph 1<\/p>` が削除されたように思えます。代わりに、Reactは1つ目の子要素のテキストコンテンツを変更し、最後の子要素を削除するという変更を加えることでDOMを調和させます。Reactは子要素の *順序* に従って調和するのです。\n+\n+\n+\n+### ステートフルな子要素\n+\n+多くのコンポーネントにとって、これは大きな処理ではありません。しかし、レンダリングのパスを超えて、 `this.state` にデータを保持しているステートフルなコンポーネントにとっては、これはとても問題になり得ます。\n+\n+多くのケースにおいては、以下のように、削除する代わりに要素を隠すことで回避することがあります。\n+\n+```html\n+\/\/ パス1のレンダリング\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+\/\/ パス2のレンダリング\n+\n+

Paragraph 1<\/p>\n+

Paragraph 2<\/p>\n+<\/Card>\n+```\n+\n+\n+### 動的な子要素\n+\n+子要素がシャッフルされているような時（検索結果のように）や、リストの最初に新しいコンポーネントが追加されるような時（ストリームのように）には、状況はさらに複雑になります。そういったケースでは、それぞれの子要素のアイデンティティやstateがレンダリングパスを保持する必要があり、以下のように `key` を認識することでそれぞれの子要素をただ1つに識別できます。\n+\n+```javascript\n+ render: function() {\n+ var results = this.props.results;\n+ return (\n+

{result.text}<\/li>;\n+ })}\n+ <\/ol>\n+ );\n+ }\n+```\n+\n+Reactがキー付けされた子要素を調和させるとき、 `key` と子要素が再び整理される（けんかをする代わりに）か削除されます（再利用される代わりに）。\n+\n+`key` は以下のように *常に* 配列の中でコンポーネントに直接提供されるべきで、その配列の中でそれぞれのコンポーネントのHTMLの子要素の入れ物に提供されるべきではありません。\n+\n+```javascript\n+\/\/ 間違い！\n+var ListItemWrapper = React.createClass({\n+ render: function() {\n+ return
{this.props.data.text}<\/li>;\n+ }\n+});\n+var MyComponent = React.createClass({\n+ render: function() {\n+ return (\n+

dillon1000/react

Files changed