編集履歴

回答編集履歴

修正

2017/11/03 08:57

投稿

スコア2415

test CHANGED Viewed

@@ -314,6 +314,8 @@
+    const { children } = this.props;
     // Object Destructuringで別途、デフォルト値を空配列として初期化
     const { messages = []} = this.props.children;
@@ -322,7 +324,7 @@
     return ([
-      <p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
+      <p key={1}>numbers: {children.numbers.map(number => number)}</p>,
       <p key={2}>messages: {messages.map(message => message)}</p>,

2017/11/03 08:57

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -314,8 +314,6 @@
-    const children = this.props;
     // Object Destructuringで別途、デフォルト値を空配列として初期化
     const { messages = []} = this.props.children;
@@ -324,7 +322,7 @@
     return ([
-      <p key={1}>numbers: {children.numbers.map(number => number)}</p>,
+      <p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
       <p key={2}>messages: {messages.map(message => message)}</p>,

this.props.children -> children

2017/11/03 08:56

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -324,7 +324,7 @@
     return ([
-      <p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
+      <p key={1}>numbers: {children.numbers.map(number => number)}</p>,
       <p key={2}>messages: {messages.map(message => message)}</p>,

解決策３の追加

2017/11/03 08:54

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -238,6 +238,114 @@
+# 解決策3
+Object Destructuringで使われる方のコンポーネント側で対象プロパティーのデフォルト値を設定
+```
+import React, { Component } from 'react';
+import Sample from './Sample';
+class App extends Component {
+  render() {
+    // messagesを空配列で初期化しないバージョン
+    const obj = {numbers: [1, 2, 3]};
+    return <Sample>{obj}</Sample>;
+  }
+}
+export default App;
+```
+```
+import React, { Component } from 'react';
+class Sample extends Component {
+  static defaultProps = {
+    message: 'This is a single message.',
+    // defaultPropsでchildren.messagesの初期値を設定しても初期値として適用されない
+    children: {
+      messages: ['message1', 'message2']
+    }
+  };
+  render() {
+    const children = this.props;
+    // Object Destructuringで別途、デフォルト値を空配列として初期化
+    const { messages = []} = this.props.children;
+    return ([
+      <p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
+      <p key={2}>messages: {messages.map(message => message)}</p>,
+      <p key={3}>message: {this.props.message}</p>
+    ])
+  }
+}
+export default Sample;
+```
 ## 出力イメージ
@@ -245,3 +353,9 @@
 ![イメージ説明](69e23ec6e86a709ee7f308b8ce2caafd.png)
 両方とも結果は同じです。
+## 更新
+解決策3を追記しました。

回答の前提

2017/11/03 08:54

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -1,4 +1,8 @@
+# 前提
-Reactの利用を考慮して、それをふまえて何が出来そうか検討してみました。
+(1).Reactの利用を考慮して、それをふまえて何が出来そうか検討してみました。
+(2).`children['msg_list']`から、親コンポーネントのchildrenは単一であることを回答の前提としました。

shallow copy

2017/11/03 03:42

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -190,6 +190,8 @@
+    // shallow copyなのでchildrenのネストが深い場合は要注意
     const children = Object.entries(
       this.props.children

太字

2017/11/03 03:33

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -2,15 +2,15 @@
 # 解決策1
 コンポーネントを使う側のコンポーネントで対象プロパティーに空配列を初期値として渡してあげる。
-ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。
+**ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。**

spell

2017/11/03 03:28

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -10,7 +10,7 @@
 コンポーネントを使う側のコンポーネントで対象プロパティーに空配列を初期値として渡してあげる。
-ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childreの初期値は設定不可のようでした。
+ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。

画像追加

2017/11/03 03:22

投稿

HayatoKamono

スコア2415

test CHANGED Viewed

@@ -229,3 +229,13 @@
 export default Sample;
 ```
+## 出力イメージ
+![イメージ説明](69e23ec6e86a709ee7f308b8ce2caafd.png)
+両方とも結果は同じです。