質問編集履歴

7

誤字

2017/10/01 08:36

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- ho親コンポーネントから子コンポーネントにpropsを伝達できない
1
+ 親コンポーネントから子コンポーネントにpropsを伝達できない
test CHANGED
File without changes

6

捕捉

2017/10/01 08:36

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -594,6 +594,8 @@
594
594
 
595
595
  これは恐らくはOnsenUIの使い方に問題があるのではなく、Reactの設計(ライフサイクルなど実行のタイミングなど)に問題があるのでしょうか。
596
596
 
597
+ しかし、追記でも書いたようにOnsenUIのNavigatorを使わずに同じような流れにしてみると、実際うまく行っているので、やはりこのNavigatorの使い方に問題があるのでしょうか。
598
+
597
599
 
598
600
 
599
601
  微妙な質問を繰り返してしまい申し訳ありません。

5

捕捉

2017/10/01 08:05

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- react-onsenuiのNavigatorで親コンポーネントから子コンポーネントにpropsを伝達できない
1
+ ho親コンポーネントから子コンポーネントにpropsを伝達できない
test CHANGED
File without changes

4

追記

2017/10/01 08:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -158,28 +158,6 @@
158
158
 
159
159
 
160
160
 
161
- consoleの出力結果です。
162
-
163
- ![![イメージ説明](7bdfda000397ed7eeed4340e77acee4e.png)説明](b22f5abab109552eb52397494bacb40b.png)](2f240075ea7b38b5ce15e2b83aea5610.png)
164
-
165
-
166
-
167
- 2回動いていて、
168
-
169
- 1回目にmapDispatchToProps内で定義したshowAlertPage関数が実行されて、
170
-
171
- 2回目のAlertコンポーネント内の
172
-
173
- console.log(`Alert ${this.props.idLen}`)
174
-
175
- でちゃんと「2」と出力されています。
176
-
177
-
178
-
179
- ですが、その後の伝達ができていなく、子コンポーネントのAlertMainPage内ではidLenにはなにも入っていません。
180
-
181
-
182
-
183
161
 
184
162
 
185
163
 
@@ -429,3 +407,197 @@
429
407
  }
430
408
 
431
409
  ```
410
+
411
+
412
+
413
+
414
+
415
+
416
+
417
+ 【追記の追記】
418
+
419
+ 質問時の私の理解不足のせいで、もはや若干違う質問になってしまっているかもしれませんが、まだ解決していないのでここで追記して質問を続けさせていただきます。
420
+
421
+
422
+
423
+ ```jaavascript
424
+
425
+ class AlertNavi extends React.Component{
426
+
427
+ //ここから
428
+
429
+ constructor(props){
430
+
431
+ super(props)
432
+
433
+ this.state = {
434
+
435
+ idLen: this.props.idLen,
436
+
437
+ };
438
+
439
+ }
440
+
441
+  //ここまではあってもなくても何も変わらない。
442
+
443
+
444
+
445
+ componentWillMount(){
446
+
447
+ const that = this
448
+
449
+ const AlertDB = ncmb.DataStore("Alert")
450
+
451
+ AlertDB.fetchAll()
452
+
453
+ .then(function(results){
454
+
455
+ that.props.showAlertPage(results.length)
456
+
457
+ })
458
+
459
+ .catch(function(err){
460
+
461
+ console.log(err)
462
+
463
+ })
464
+
465
+ }
466
+
467
+
468
+
469
+ render(){
470
+
471
+ const AlertContent = styled.div'
472
+
473
+ height: 100%;
474
+
475
+ '
476
+
477
+ console.log("this.props.idLen=" + this.props.idLen);
478
+
479
+
480
+
481
+ const alertList = []
482
+
483
+ let idLen = this.props.idLen
484
+
485
+ for(var i=idLen-1; i>=0; i--){
486
+
487
+ alertList.push(<RenderAlert {...this.props} id={i}/>)
488
+
489
+ }
490
+
491
+
492
+
493
+ return(
494
+
495
+ <Page
496
+
497
+ renderToolbar={() =>
498
+
499
+ <Toolbar modifier="material">
500
+
501
+ <div className='center'>アラート</div>
502
+
503
+ </Toolbar>
504
+
505
+ }>
506
+
507
+ <AlertContent>
508
+
509
+ {alertList}
510
+
511
+ </AlertContent>
512
+
513
+ </Page>
514
+
515
+ )
516
+
517
+ }
518
+
519
+ }
520
+
521
+
522
+
523
+ class Alert extends React.Component{
524
+
525
+
526
+
527
+ renderPage(route, navigator) {
528
+
529
+ const props = route.props || {};
530
+
531
+ props.navigator = navigator;
532
+
533
+
534
+
535
+ return React.createElement(route.component, props);
536
+
537
+ }
538
+
539
+
540
+
541
+ render() {
542
+
543
+ console.log("idLen=" + this.props.idLen);
544
+
545
+ return (
546
+
547
+ <Navigator
548
+
549
+ initialRoute={{
550
+
551
+ component: AlertNavi,
552
+
553
+ props:{
554
+
555
+ idLen: this.props.idLen,
556
+
557
+ showAlertPage: this.props.showAlertPage,
558
+
559
+ },
560
+
561
+ // props:{...this.props},
562
+
563
+ }}
564
+
565
+ renderPage={this.renderPage}
566
+
567
+ />
568
+
569
+ );
570
+
571
+ }
572
+
573
+ }
574
+
575
+
576
+
577
+ ```
578
+
579
+
580
+
581
+ 実際に実行した時のコンソールの表示が以下の画像です。
582
+
583
+ ![コンソールの表示](f034aad15079046314387418030283e5.png)
584
+
585
+
586
+
587
+ 1回目(?)にreduxのactionが実行されて(画像1行目、2行目)、idLenの値が変更され、nullから2に変わっています。(親コンポーネントの中では)(画像3行目)
588
+
589
+ しかし問題なのはその次で、その変更されたidLenが子コンポーネントに伝わっていません(画像4行目)
590
+
591
+
592
+
593
+ なのでpropsの伝達はできているのはできていると思うのですが、やはりまだ完璧には上手く行っていません。
594
+
595
+ これは恐らくはOnsenUIの使い方に問題があるのではなく、Reactの設計(ライフサイクルなど実行のタイミングなど)に問題があるのでしょうか。
596
+
597
+
598
+
599
+ 微妙な質問を繰り返してしまい申し訳ありません。
600
+
601
+ 良かったら教えて頂けると助かります。
602
+
603
+ よろしくお願いします。

3

追記

2017/10/01 07:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -290,7 +290,7 @@
290
290
 
291
291
  component: AlertMainPage,
292
292
 
293
- // props: {...this.props}, //今回のみココ?でもうまくいかない..。
293
+ props: {...this.props}, //今回のみココ?でもうまくいかない..。(「普通はココ?」のときよりは若干マシな結果になる)
294
294
 
295
295
  }}
296
296
 

2

追記

2017/09/28 07:27

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- React,Redux,OnsenUIで親コンポーネントから子コンポーネントにpropsを伝達できない
1
+ react-onsenuiのNavigatorで親コンポーネントから子コンポーネントにpropsを伝達できない
test CHANGED
@@ -1,10 +1,10 @@
1
1
  React,Redux初心者です。
2
2
 
3
- monaca,React,Redux,OnsenUIをつかってアプリケーションを作成しています。
3
+ monaca,React,Redux,OnsenUIを使ってアプリケーションを作成しています。
4
-
5
-
6
-
4
+
5
+
6
+
7
- 今回OnsenUIの[Navigator](https://ja.onsen.io/v2/api/react/Navigator.html)を使っているのですが、上手くpropsを伝達できません。どこに問題があるのでしょうか。
7
+ 今回OnsenUIの[Navigator](https://ja.onsen.io/v2/api/react/Navigator.html)を使っているのですが、上手くpropsを伝達できません。どこに問題があるのでしょうか。
8
8
 
9
9
 
10
10
 
@@ -16,20 +16,6 @@
16
16
 
17
17
 
18
18
 
19
- // constructor(props) {
20
-
21
- // super(props)
22
-
23
- // this.state = {
24
-
25
- // idLen: null,
26
-
27
- // }
28
-
29
- // }
30
-
31
-
32
-
33
19
  componentWillMount(){
34
20
 
35
21
  const that = this
@@ -42,12 +28,6 @@
42
28
 
43
29
  that.props.showAlertPage(results.length)
44
30
 
45
- // that.setState({
46
-
47
- // idLen: results.length
48
-
49
- // })
50
-
51
31
  })
52
32
 
53
33
  .catch(function(err){
@@ -72,11 +52,7 @@
72
52
 
73
53
  const alertViewList = []
74
54
 
75
- for(var i=1; i>=0; i--){
76
-
77
- //最終的には以下のようなfor文にしたい
78
-
79
- // for(var i=this.props.idLen-1; i>=0; i--){
55
+ for(var i=this.props.idLen-1; i>=0; i--){
80
56
 
81
57
  alertViewList.push(<AlertView {...props} id={i}/>)
82
58
 
@@ -128,6 +104,8 @@
128
104
 
129
105
 
130
106
 
107
+ //AlertはContainerConponentです。
108
+
131
109
  class Alert extends React.Component{
132
110
 
133
111
  renderPage(route,navigator) {
@@ -176,51 +154,239 @@
176
154
 
177
155
  }
178
156
 
179
-
180
-
181
- const mapStateToProps = (state) => {
182
-
183
- return {
184
-
185
- idLen: state.idLen,
186
-
187
- }
188
-
189
- }
190
-
191
-
192
-
193
- const mapDispatchToProps = (dispatch) => {
157
+ ```
158
+
159
+
160
+
161
+ consoleの出力結果です。
162
+
163
+ ![![イメージ説明](7bdfda000397ed7eeed4340e77acee4e.png)説明](b22f5abab109552eb52397494bacb40b.png)](2f240075ea7b38b5ce15e2b83aea5610.png)
164
+
165
+
166
+
167
+ 2回動いていて、
168
+
169
+ 1回目にmapDispatchToProps内で定義したshowAlertPage関数が実行されて、
170
+
171
+ 2回目のAlertコンポーネント内の
172
+
173
+ console.log(`Alert ${this.props.idLen}`)
174
+
175
+ でちゃんと「2」と出力されています。
176
+
177
+
178
+
179
+ ですが、その後の伝達ができていなく、子コンポーネントのAlertMainPage内ではidLenにはなにも入っていません。
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+ 【追記】
188
+
189
+ 若干進みました。
190
+
191
+ 質問時は本当にどこに問題があるのかわからない状態でした。
192
+
193
+ ・Reduxの設計に問題がある
194
+
195
+ ・OnsenUIの使い方に問題がある
196
+
197
+
198
+
199
+ ですが色々試してみて前者については問題ないことがわかりました。
200
+
201
+
202
+
203
+ 先程のコードをOnsenUIのNavigatorを使わずに似たような構造にしてみました。
204
+
205
+ ```javascript
206
+
207
+ class TestNavi extends React.Component {
208
+
209
+ render() {
210
+
211
+ return(
212
+
213
+ <AlertMainPage {...this.props}/>
214
+
215
+
216
+
217
+ )
218
+
219
+ }
220
+
221
+ }
222
+
223
+
224
+
225
+ class Alert extends React.Component{
226
+
227
+
228
+
229
+ render() {
230
+
231
+ console.log(`Alert ${this.props.idLen}`)
232
+
233
+ return (
234
+
235
+ <TestNavi {...this.props}/>
236
+
237
+ );
238
+
239
+ }
240
+
241
+ }
242
+
243
+ ```
244
+
245
+
246
+
247
+ するとconsoleには理想通りの値が出力されました。
248
+
249
+
250
+
251
+ ですので、今僕がわからないのは、
252
+
253
+ **「OnsenUIのNavigatorを使う時にどのようにしたら親コンポーネントから子コンポーネントにpropsを伝達できるか。」**です。
254
+
255
+
256
+
257
+ 一般的には親コンポーネントから子コンポーネントにpropsを伝達していくときはバケツリレーを避けるためにSpread Attributesを利用するかと思いますが、なぜか上手く行きません。
258
+
259
+
260
+
261
+ ```javascript
262
+
263
+ class Alert extends React.Component{
264
+
265
+ renderPage(route,navigator) {
266
+
267
+ const props = route.props || {};
268
+
269
+ props.navigator = navigator;
270
+
271
+ return React.createElement(route.component, props)
272
+
273
+ }
274
+
275
+
276
+
277
+ render() {
278
+
279
+ console.log(`Alert ${this.props.idLen}`)
280
+
281
+ return (
282
+
283
+ <Navigator
284
+
285
+ {...this.props} //普通はココ?
286
+
287
+ swipeable
288
+
289
+ initialRoute={{
290
+
291
+ component: AlertMainPage,
292
+
293
+ // props: {...this.props}, //今回のみココ?でもうまくいかない..。
294
+
295
+ }}
296
+
297
+ renderPage={this.renderPage}
298
+
299
+ />
300
+
301
+ );
302
+
303
+ }
304
+
305
+ }
306
+
307
+ ```
308
+
309
+
310
+
311
+ またreact-onsenuiのNavigatorのrender()内を見ても、Spread Attributesを使っているように見えますが、なかなか理想通りに動きません。
312
+
313
+ ```javascript
314
+
315
+ render() {
316
+
317
+ const {...others} = this.props;
318
+
319
+ Util.convert(others, 'animationOptions', {fun: Util.animationOptionsConverter, newName: 'animation-options'});
320
+
321
+ const pages = this.routes ? this.routes.map((route) => this.props.renderPage(route, this)) : null;
322
+
323
+
324
+
325
+ return (
326
+
327
+ <ons-navigator {...others} ref='navi'>
328
+
329
+ {pages}
330
+
331
+ </ons-navigator>
332
+
333
+ );
334
+
335
+ }
336
+
337
+ }
338
+
339
+ ```
340
+
341
+
342
+
343
+
344
+
345
+ 上のリンクの公式ドキュメントを読んだり、実際に[Navigatorコンポーネントの中身](https://github.com/OnsenUI/react-onsenui/blob/master/src/components/Navigator.jsx)を読んだりしてみたのですが、いまいち理解することが出ませんでした。
346
+
347
+
348
+
349
+
350
+
351
+ どなたかわかる方がいらっしゃれば教えていただけませんでしょうか。
352
+
353
+ よろしくお願いします。
354
+
355
+
356
+
357
+
358
+
359
+
360
+
361
+ 【捕捉】
362
+
363
+ Action
364
+
365
+ ```javascript
366
+
367
+ import * as actionTypes from '../actionTypes'
368
+
369
+
370
+
371
+ //Alert
372
+
373
+ export const loadAlertPageAction = (idLen) => {
194
374
 
195
375
  return{
196
376
 
197
- showAlertPage(idLen){
198
-
199
- dispatch(AppActions.loadAlertPageAction(idLen))
377
+ type: actionTypes.ALERT_PAGE_LOAD,
200
-
378
+
201
- },
379
+ idLen,
202
-
380
+
203
- }
381
+ }
204
-
382
+
205
- }
383
+ }
206
-
207
-
208
-
209
- export default connect(
384
+
210
-
211
- mapStateToProps,
212
-
213
- mapDispatchToProps
214
-
215
- )(Alert)
216
-
217
- ```
385
+ ```
218
-
219
-
220
-
221
-
222
-
386
+
387
+
388
+
223
- Action
389
+ Reducer
224
390
 
225
391
  ```javascript
226
392
 
@@ -228,42 +394,16 @@
228
394
 
229
395
 
230
396
 
397
+ const initialState = {
398
+
399
+ idLen: null,
400
+
401
+ }
402
+
403
+
404
+
231
405
  //Alert
232
406
 
233
- export const loadAlertPageAction = (idLen) => {
234
-
235
- return{
236
-
237
- type: actionTypes.ALERT_PAGE_LOAD,
238
-
239
- idLen,
240
-
241
- }
242
-
243
- }
244
-
245
- ```
246
-
247
-
248
-
249
- Reducer
250
-
251
- ```javascript
252
-
253
- import * as actionTypes from '../actionTypes'
254
-
255
-
256
-
257
- const initialState = {
258
-
259
- idLen: null,
260
-
261
- }
262
-
263
-
264
-
265
- //Alert
266
-
267
407
  export const alertReducer = (state = initialState, action) => {
268
408
 
269
409
 
@@ -289,45 +429,3 @@
289
429
  }
290
430
 
291
431
  ```
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
- consoleの出力結果です。
304
-
305
- ![![イメージ説明](7bdfda000397ed7eeed4340e77acee4e.png)説明](b22f5abab109552eb52397494bacb40b.png)](2f240075ea7b38b5ce15e2b83aea5610.png)
306
-
307
-
308
-
309
- 2回動いていて、
310
-
311
- 1回目にmapDispatchToProps内で定義したshowAlertPage関数が実行されて、
312
-
313
- 2回目のAlertコンポーネント内の
314
-
315
- console.log(`Alert ${this.props.idLen}`)
316
-
317
- でちゃんと「2」と出力されています。
318
-
319
-
320
-
321
- ですが、その後の伝達ができていなく、子コンポーネントのAlertMainPage内ではidLenにはなにも入っていません。
322
-
323
-
324
-
325
- React,Reduxをちゃんと理解していない、
326
-
327
- OnsenUIの使い方を理解していない、などどこに問題があるのかがわかりません。
328
-
329
-
330
-
331
- どなたかわかる方がいらっしゃれば教えていただけませんでしょうか。
332
-
333
- よろしくお願いします。

1

追記

2017/09/28 07:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -218,6 +218,88 @@
218
218
 
219
219
 
220
220
 
221
+
222
+
223
+ Action
224
+
225
+ ```javascript
226
+
227
+ import * as actionTypes from '../actionTypes'
228
+
229
+
230
+
231
+ //Alert
232
+
233
+ export const loadAlertPageAction = (idLen) => {
234
+
235
+ return{
236
+
237
+ type: actionTypes.ALERT_PAGE_LOAD,
238
+
239
+ idLen,
240
+
241
+ }
242
+
243
+ }
244
+
245
+ ```
246
+
247
+
248
+
249
+ Reducer
250
+
251
+ ```javascript
252
+
253
+ import * as actionTypes from '../actionTypes'
254
+
255
+
256
+
257
+ const initialState = {
258
+
259
+ idLen: null,
260
+
261
+ }
262
+
263
+
264
+
265
+ //Alert
266
+
267
+ export const alertReducer = (state = initialState, action) => {
268
+
269
+
270
+
271
+ switch(action.type){
272
+
273
+ case actionTypes.ALERT_PAGE_LOAD:
274
+
275
+ return Object.assign({}, state, {
276
+
277
+ idLen: action.idLen,
278
+
279
+ })
280
+
281
+ default:
282
+
283
+ return state
284
+
285
+ }
286
+
287
+
288
+
289
+ }
290
+
291
+ ```
292
+
293
+
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
302
+
221
303
  consoleの出力結果です。
222
304
 
223
305
  ![![イメージ説明](7bdfda000397ed7eeed4340e77acee4e.png)説明](b22f5abab109552eb52397494bacb40b.png)](2f240075ea7b38b5ce15e2b83aea5610.png)