回答編集履歴
9
修正
answer
CHANGED
|
@@ -156,11 +156,12 @@
|
|
|
156
156
|
|
|
157
157
|
render() {
|
|
158
158
|
|
|
159
|
+
const { children } = this.props;
|
|
159
160
|
// Object Destructuringで別途、デフォルト値を空配列として初期化
|
|
160
161
|
const { messages = []} = this.props.children;
|
|
161
162
|
|
|
162
163
|
return ([
|
|
163
|
-
<p key={1}>numbers: {
|
|
164
|
+
<p key={1}>numbers: {children.numbers.map(number => number)}</p>,
|
|
164
165
|
<p key={2}>messages: {messages.map(message => message)}</p>,
|
|
165
166
|
<p key={3}>message: {this.props.message}</p>
|
|
166
167
|
])
|
8
/
answer
CHANGED
|
@@ -156,12 +156,11 @@
|
|
|
156
156
|
|
|
157
157
|
render() {
|
|
158
158
|
|
|
159
|
-
const children = this.props;
|
|
160
159
|
// Object Destructuringで別途、デフォルト値を空配列として初期化
|
|
161
160
|
const { messages = []} = this.props.children;
|
|
162
161
|
|
|
163
162
|
return ([
|
|
164
|
-
<p key={1}>numbers: {children.numbers.map(number => number)}</p>,
|
|
163
|
+
<p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
|
|
165
164
|
<p key={2}>messages: {messages.map(message => message)}</p>,
|
|
166
165
|
<p key={3}>message: {this.props.message}</p>
|
|
167
166
|
])
|
7
this.props.children -> children
answer
CHANGED
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
const { messages = []} = this.props.children;
|
|
162
162
|
|
|
163
163
|
return ([
|
|
164
|
-
<p key={1}>numbers: {
|
|
164
|
+
<p key={1}>numbers: {children.numbers.map(number => number)}</p>,
|
|
165
165
|
<p key={2}>messages: {messages.map(message => message)}</p>,
|
|
166
166
|
<p key={3}>message: {this.props.message}</p>
|
|
167
167
|
])
|
6
解決策３の追加
answer
CHANGED
|
@@ -118,7 +118,64 @@
|
|
|
118
118
|
export default Sample;
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
+
# 解決策3
|
|
122
|
+
Object Destructuringで使われる方のコンポーネント側で対象プロパティーのデフォルト値を設定
|
|
123
|
+
|
|
124
|
+
```
|
|
125
|
+
import React, { Component } from 'react';
|
|
126
|
+
|
|
127
|
+
import Sample from './Sample';
|
|
128
|
+
|
|
129
|
+
class App extends Component {
|
|
130
|
+
|
|
131
|
+
render() {
|
|
132
|
+
|
|
133
|
+
// messagesを空配列で初期化しないバージョン
|
|
134
|
+
const obj = {numbers: [1, 2, 3]};
|
|
135
|
+
|
|
136
|
+
return <Sample>{obj}</Sample>;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
export default App;
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
import React, { Component } from 'react';
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
class Sample extends Component {
|
|
148
|
+
|
|
149
|
+
static defaultProps = {
|
|
150
|
+
message: 'This is a single message.',
|
|
151
|
+
// defaultPropsでchildren.messagesの初期値を設定しても初期値として適用されない
|
|
152
|
+
children: {
|
|
153
|
+
messages: ['message1', 'message2']
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
render() {
|
|
158
|
+
|
|
159
|
+
const children = this.props;
|
|
160
|
+
// Object Destructuringで別途、デフォルト値を空配列として初期化
|
|
161
|
+
const { messages = []} = this.props.children;
|
|
162
|
+
|
|
163
|
+
return ([
|
|
164
|
+
<p key={1}>numbers: {this.props.children.numbers.map(number => number)}</p>,
|
|
165
|
+
<p key={2}>messages: {messages.map(message => message)}</p>,
|
|
166
|
+
<p key={3}>message: {this.props.message}</p>
|
|
167
|
+
])
|
|
168
|
+
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
export default Sample;
|
|
173
|
+
```
|
|
174
|
+
|
|
121
175
|
## 出力イメージ
|
|
122
176
|
|
|
123
177
|
|
|
124
|
-
両方とも結果は同じです。
|
|
178
|
+
両方とも結果は同じです。
|
|
179
|
+
|
|
180
|
+
## 更新
|
|
181
|
+
解決策3を追記しました。
|
5
回答の前提
answer
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
# 前提
|
|
1
|
-
Reactの利用を考慮して、それをふまえて何が出来そうか検討してみました。
|
|
2
|
+
(1).Reactの利用を考慮して、それをふまえて何が出来そうか検討してみました。
|
|
3
|
+
(2).`children['msg_list']`から、親コンポーネントのchildrenは単一であることを回答の前提としました。
|
|
2
4
|
|
|
3
5
|
# 解決策1
|
|
4
6
|
|
4
shallow copy
answer
CHANGED
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
numbers: []
|
|
95
95
|
};
|
|
96
96
|
|
|
97
|
+
// shallow copyなのでchildrenのネストが深い場合は要注意
|
|
97
98
|
const children = Object.entries(
|
|
98
99
|
this.props.children
|
|
99
100
|
).reduce((accumulator, child) => {
|
3
太字
answer
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
Reactの利用を考慮して、それをふまえて何が出来そうか検討してみました。
|
|
2
2
|
|
|
3
|
-
|
|
4
3
|
# 解決策1
|
|
5
4
|
|
|
6
5
|
コンポーネントを使う側のコンポーネントで対象プロパティーに空配列を初期値として渡してあげる。
|
|
7
|
-
ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。
|
|
8
6
|
|
|
7
|
+
**ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。**
|
|
8
|
+
|
|
9
9
|
```
|
|
10
10
|
import React, { Component } from 'react';
|
|
11
11
|
|
2
spell
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
# 解決策1
|
|
5
5
|
|
|
6
6
|
コンポーネントを使う側のコンポーネントで対象プロパティーに空配列を初期値として渡してあげる。
|
|
7
|
-
ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、
|
|
7
|
+
ちなみに、使われる側のコンポーネントのdefaultPropsでchildrenの初期値を設定しようと試みたところ、childrenの初期値は設定不可のようでした。
|
|
8
8
|
|
|
9
9
|
```
|
|
10
10
|
import React, { Component } from 'react';
|
1
画像追加
answer
CHANGED
|
@@ -113,4 +113,9 @@
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
export default Sample;
|
|
116
|
-
```
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## 出力イメージ
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
両方とも結果は同じです。
|