teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問react-onsenui の Tabbar で子コンポーネントへ props が渡せません

編集履歴

質問編集履歴

7

ソースコード修正

2018/12/30 00:44

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
@@ -122,6 +122,8 @@
122
122
 
123
123
 
124
124
 
125
+ // タブの描画
126
+
125
127
  renderTabs = () => {
126
128
 
127
129
  return [
@@ -148,6 +150,8 @@
148
150
 
149
151
 
150
152
 
153
+ // HomePage タブのボタンクリックでイベント発火
154
+
151
155
  handleOnClick = () => {
152
156
 
153
157
  const fortunes = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];

6

添付画像差し替え

2018/12/30 00:44

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
@@ -22,13 +22,13 @@
22
22
 
23
23
  親コンポーネントのstateは更新されていますが↓
24
24
 
25
- ![親コンポーネントのstateは更新されていますが](b835236e7343a588aca104a60ba59ccb.png)
25
+ ![親コンポーネント](5bf26481c0921a1c3d590de681186123.png)
26
26
 
27
27
 
28
28
 
29
29
  タブコンポーネントにはpropsとして渡っていません↓
30
30
 
31
- ![タブコンポーネントのpropsとして渡せていません](17cfddfa4348ba770b5ced6e1e8d37d3.png)
31
+ ![タブコンポーネント](62d1c2459feba4e1d1cef77af141b888.png)
32
32
 
33
33
 
34
34
 
@@ -116,74 +116,64 @@
116
116
 
117
117
  class App extends Component {
118
118
 
119
- constructor(props) {
119
+ state = {scores: []};
120
-
121
- super(props);
120
+
122
-
123
- this.state = {
124
-
125
- scores: [],
121
+ scoreItems = [];
122
+
123
+
124
+
126
-
125
+ renderTabs = () => {
126
+
127
+ return [
128
+
129
+ {
130
+
131
+ content: <HomePage key="Home" omikuji={this.handleOnClick} />,
132
+
133
+ tab: <Tab key="Home" label="Home" icon="md-home" />,
134
+
135
+ },
136
+
137
+ {
138
+
139
+ content: <SettingsPage key="settings" scores={this.state.scores} />,
140
+
141
+ tab: <Tab key="settings" label="Settings" icon="md-settings" />,
142
+
143
+ },
144
+
145
+ ];
146
+
127
- };
147
+ };
148
+
149
+
150
+
128
-
151
+ handleOnClick = () => {
152
+
153
+ const fortunes = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];
154
+
155
+ let num = Math.floor(Math.random() * fortunes.length);
156
+
129
- this.scoreItems = [];
157
+ this.scoreItems.unshift({
158
+
159
+ fortune: fortunes[num],
160
+
161
+ created_at: new Date(),
162
+
163
+ });
164
+
165
+ this.setState({scores: this.scoreItems.slice()});
166
+
167
+ };
168
+
169
+
170
+
171
+ render() {
172
+
173
+ return <Tabbar renderTabs={this.renderTabs} />;
130
174
 
131
175
  }
132
176
 
133
-
134
-
135
- renderTabs = () => {
136
-
137
- return [
138
-
139
- {
140
-
141
- content: <HomePage key="Home" omikuji={this.handleOnClick} />,
142
-
143
- tab: <Tab key="Home" label="Home" icon="md-home" />,
144
-
145
- },
146
-
147
- {
148
-
149
- content: <SettingsPage key="settings" scores={this.state.scores} />,
150
-
151
- tab: <Tab key="settings" label="Settings" icon="md-settings" />,
152
-
153
- },
154
-
155
- ];
156
-
157
- };
158
-
159
-
160
-
161
- handleOnClick = () => {
162
-
163
- const fortunes = ['大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];
164
-
165
- let num = Math.floor(Math.random() * fortunes.length);
166
-
167
- this.scoreItems.unshift({
168
-
169
- fortune: fortunes[num],
170
-
171
- created_at: new Date(),
172
-
173
- });
174
-
175
- this.setState({scores: this.scoreItems.slice()});
176
-
177
- };
178
-
179
-
180
-
181
- render() {
182
-
183
- return <Tabbar renderTabs={this.renderTabs} />;
184
-
185
- }
186
-
187
177
  }
188
178
 
189
179
 

5

ソースコード修正

2018/12/30 00:37

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
@@ -58,6 +58,8 @@
58
58
 
59
59
 
60
60
 
61
+ // HomePage タブ
62
+
61
63
  const HomePage = (props) => (
62
64
 
63
65
  <Page>
@@ -76,6 +78,8 @@
76
78
 
77
79
 
78
80
 
81
+ // SettingsPage タブ
82
+
79
83
  const SettingsPage = (props) => (
80
84
 
81
85
  <Page>
@@ -108,6 +112,8 @@
108
112
 
109
113
 
110
114
 
115
+ // 親コンポーネント
116
+
111
117
  class App extends Component {
112
118
 
113
119
  constructor(props) {

4

ソースコード修正

2018/12/30 00:29

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,26 @@
38
38
 
39
39
  ```JavaScript
40
40
 
41
+ // App.js
42
+
43
+
44
+
45
+ import React, {Component} from 'react';
46
+
47
+ import PropTypes from 'prop-types';
48
+
49
+ import {Page, Tab, Tabbar, Button} from 'react-onsenui';
50
+
51
+
52
+
53
+ import 'onsenui/css/onsenui.css';
54
+
55
+ import 'onsenui/css/onsen-css-components.css';
56
+
57
+ import './App.css';
58
+
59
+
60
+
41
61
  const HomePage = (props) => (
42
62
 
43
63
  <Page>
@@ -160,6 +180,12 @@
160
180
 
161
181
  }
162
182
 
183
+
184
+
185
+ export default App;
186
+
187
+
188
+
163
189
  ```
164
190
 
165
191
 

3

タグ修正

2018/12/29 23:44

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
File without changes

2

誤字の修正

2018/12/29 23:40

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  ![親コンポーネントのstateは更新されていますが](b835236e7343a588aca104a60ba59ccb.png)
26
26
 
27
+
28
+
27
- タブコンポーネントにはpropsとして渡っていません
29
+ タブコンポーネントにはpropsとして渡っていません↓
28
30
 
29
31
  ![タブコンポーネントのpropsとして渡せていません](17cfddfa4348ba770b5ced6e1e8d37d3.png)
30
32
 
@@ -168,7 +170,7 @@
168
170
 
169
171
  ・コンストラクタ内の scoreItems 変数を props にすると SettingsPage には渡ります
170
172
 
171
- ・しかしそれでも SetingsPage 内の <Page /> では "children: Array[0]" となってしまいます
173
+ ・しかしそれでも SettingsPage 内の <Page /> では "children: Array[0]" となってしまいます
172
174
 
173
175
 
174
176
 

1

初心者マーク追加

2018/12/29 07:24

投稿

KentaKonno
KentaKonno

スコア28

test CHANGED
File without changes
test CHANGED
File without changes