teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

編集履歴

質問編集履歴

9

一部のコード修正

2020/07/11 05:18

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -174,7 +174,7 @@
174
174
 
175
175
 
176
176
 
177
- const Element: FC<dammyType[]> = (result) => (
177
+ const Element: FC<dammyType[]> = ({result}) => (
178
178
 
179
179
  <Fragment>
180
180
 
@@ -230,6 +230,16 @@
230
230
 
231
231
  子コンポーネント側ではエラー表示はありませんが上記のようになっています。
232
232
 
233
+ 追記：props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。
234
+
235
+ ```
236
+
237
+ Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.
238
+
239
+ ```
240
+
241
+
242
+
233
243
  ### 追記２：App.tsx側のソースコード追加
234
244
 
235
245
  App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。

8

誤字

2020/07/11 05:18

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -232,7 +232,7 @@
232
232
 
233
233
  ### 追記２：App.tsx側のソースコード追加
234
234
 
235
- App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。以前、質問のエラーは残っています。
235
+ App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。
236
236
 
237
237
  ```
238
238
 

7

質問とは別のエラー解決

2020/07/11 04:56

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -232,7 +232,7 @@
232
232
 
233
233
  ### 追記２：App.tsx側のソースコード追加
234
234
 
235
- App.tsx側にもエラーが表示されていたので追記です。
235
+ App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。以前、質問のエラーは残っています。
236
236
 
237
237
  ```
238
238
 
@@ -260,7 +260,7 @@
260
260
 
261
261
  import Home from './components/pages/Home/home';
262
262
 
263
- import Element from './components/pages/Element/element';
263
+ import ElementContainer from './containers/pages/Element/element';
264
264
 
265
265
 
266
266
 
@@ -284,9 +284,7 @@
284
284
 
285
285
  <Route exact path="/elm">
286
286
 
287
- 　　　　　　//ここのElementへエラーが表示される
288
-
289
- <Element />
287
+ <ElementContainer />
290
288
 
291
289
  </Route>
292
290
 
@@ -303,11 +301,3 @@
303
301
 
304
302
 
305
303
  ```
306
-
307
- 少し混乱しているのですが、見た目側は「components」、関数やもろもろの処理側は「containers」で分けておりファイル構造は両者ともに同じになるように対応しています。
308
-
309
- Reactは親から子コンポーネントへの受け渡しが原則ですが、<Element />はApp側とcontainers側で呼び出しており、App側から<Element />へは何も渡しておりません。containers側からは<Element result={result}/>を渡しております。
310
-
311
-
312
-
313
- この書き方がアウトだったのでしょうか。（今からcontainers側のコンポーネントとして置き換えてみますが近況です。また追記修正すかもしれませんが行き違えていたらすみません）

6

追記情報と一部の内容の位置を修正

2020/07/11 04:55

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  ### 該当のソースコード
28
28
 
29
-
29
+ containers/Element/element.tsx側
30
30
 
31
31
  ```ここに言語名を入力
32
32
 
@@ -136,7 +136,13 @@
136
136
 
137
137
 
138
138
 
139
+ 追記：Reactの型に"@types/react": "^16.9.0"を使っています。
140
+
141
+
142
+
139
- ### <Element />側のソースコード
143
+ ### 追記１：<Element />側のソースコード
144
+
145
+ components/Element/element.tsx側
140
146
 
141
147
  ```
142
148
 
@@ -224,6 +230,84 @@
224
230
 
225
231
  子コンポーネント側ではエラー表示はありませんが上記のようになっています。
226
232
 
227
-
233
+ ### 追記２：App.tsx側のソースコード追加
234
+
228
-
235
+ App.tsx側にもエラーが表示されていたので追記です。
236
+
237
+ ```
238
+
239
+ Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
240
+
241
+ ```
242
+
243
+
244
+
245
+ ```Appソース
246
+
247
+ /** @jsx jsx */
248
+
249
+ import { FC } from 'react';
250
+
251
+ import { css, jsx } from '@emotion/core';
252
+
253
+ import { BrowserRouter, Switch, Route } from 'react-router-dom';
254
+
255
+ import { Font, Color } from './components/common/styles/CssValue';
256
+
257
+
258
+
259
+ import './components/common/styles/ress.css';
260
+
261
+ import Home from './components/pages/Home/home';
262
+
263
+ import Element from './components/pages/Element/element';
264
+
265
+
266
+
267
+ //cssの省略
268
+
269
+
270
+
271
+ const App: FC = () => (
272
+
273
+ <div css={Global}>
274
+
275
+ <BrowserRouter>
276
+
277
+ <Switch>
278
+
229
- Reactの型に"@types/react": "^16.9.0"を使っています。
279
+ <Route exact path="/">
280
+
281
+ <Home />
282
+
283
+ </Route>
284
+
285
+ <Route exact path="/elm">
286
+
287
+ 　　　　　　//ここのElementへエラーが表示される
288
+
289
+ <Element />
290
+
291
+ </Route>
292
+
293
+ </Switch>
294
+
295
+ </BrowserRouter>
296
+
297
+ </div>
298
+
299
+ );
300
+
301
+ export default App;
302
+
303
+
304
+
305
+ ```
306
+
307
+ 少し混乱しているのですが、見た目側は「components」、関数やもろもろの処理側は「containers」で分けておりファイル構造は両者ともに同じになるように対応しています。
308
+
309
+ Reactは親から子コンポーネントへの受け渡しが原則ですが、<Element />はApp側とcontainers側で呼び出しており、App側から<Element />へは何も渡しておりません。containers側からは<Element result={result}/>を渡しております。
310
+
311
+
312
+
313
+ この書き方がアウトだったのでしょうか。（今からcontainers側のコンポーネントとして置き換えてみますが近況です。また追記修正すかもしれませんが行き違えていたらすみません）

5

ライブラリ情報の追記

2020/07/11 04:50

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -223,3 +223,7 @@
223
223
  ```
224
224
 
225
225
  子コンポーネント側ではエラー表示はありませんが上記のようになっています。
226
+
227
+
228
+
229
+ Reactの型に"@types/react": "^16.9.0"を使っています。

4

エラーメッセージの記載もれを追記しました

2020/07/11 04:22

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -12,11 +12,15 @@
12
12
 
13
13
  ```
14
14
 
15
- Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
15
+ Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'.
16
-
16
+
17
- Property 'result' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
17
+ Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'
18
-
18
+
19
- ```
19
+ ```
20
+
21
+ （7.11追記：↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。）
22
+
23
+
20
24
 
21
25
  上記のように怒られます。
22
26
 

3

Element要素のソースを追記しました

2020/07/11 04:08

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -129,3 +129,93 @@
129
129
  cssはEmotion
130
130
 
131
131
  バックエンドはFirebaseを利用します
132
+
133
+
134
+
135
+ ### <Element />側のソースコード
136
+
137
+ ```
138
+
139
+ /** @jsx jsx */
140
+
141
+ import { Fragment, FC } from 'react';
142
+
143
+ import { css, jsx } from '@emotion/core';
144
+
145
+
146
+
147
+ import Header from '../../common/templates/header';
148
+
149
+ import Footer from '../../common/templates/footer';
150
+
151
+ import SocialBtn from '../../common/parts/button/social';
152
+
153
+ import StuffFilter from '../../common/parts/filter/stuffFilter';
154
+
155
+
156
+
157
+ import { Font } from 'components/common/styles/CssValue';
158
+
159
+ import { dammyType } from '../../../seed/dammy';
160
+
161
+
162
+
163
+ //cssの記述を省略
164
+
165
+
166
+
167
+ const Element: FC<dammyType[]> = (result) => (
168
+
169
+ <Fragment>
170
+
171
+ <Header />
172
+
173
+ <div css={content}>
174
+
175
+ <div css={titleH1}>
176
+
177
+ //titleのテキスト
178
+
179
+ </div>
180
+
181
+ <div css={socialSpace}>
182
+
183
+ <SocialBtn />
184
+
185
+ </div>
186
+
187
+ <div css={article}>
188
+
189
+ <p>
190
+
191
+ 　　　　　　//記事のテキスト
192
+
193
+ </p>
194
+
195
+ </div>
196
+
197
+ <div>
198
+
199
+ //孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい
200
+
201
+ {result}
202
+
203
+ </div>
204
+
205
+ </div>
206
+
207
+ <Footer />
208
+
209
+ </Fragment>
210
+
211
+ );
212
+
213
+
214
+
215
+ export default Element;
216
+
217
+
218
+
219
+ ```
220
+
221
+ 子コンポーネント側ではエラー表示はありませんが上記のようになっています。

2

誤字を修正しました。

2020/07/11 04:00

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
  ```
64
64
 
65
- <Element result={result} />の「result={result}のresult」に対して怒られています。
65
+ <Element result={result} />の「result={result}のresult=」に対して怒られています。
66
66
 
67
67
 
68
68
 

1

誤字を修正しました。

2020/07/10 14:26

投稿

moimoi_sushi
moimoi_sushi

スコア26

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ### 発生している問題・エラーメッセージ
10
10
 
11
- 子コンポーネント(UI側)へ値を記載すると下記メッセージがVSCode上で指摘されます
11
+ 子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます
12
12
 
13
13
  ```
14
14