質問編集履歴
9
一部のコード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
//cssの記述を省略
|
|
88
88
|
|
|
89
|
-
const Element: FC<dammyType[]> = (result) => (
|
|
89
|
+
const Element: FC<dammyType[]> = ({result}) => (
|
|
90
90
|
<Fragment>
|
|
91
91
|
<Header />
|
|
92
92
|
<div css={content}>
|
|
@@ -114,6 +114,11 @@
|
|
|
114
114
|
|
|
115
115
|
```
|
|
116
116
|
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
117
|
+
追記：props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。
|
|
118
|
+
```
|
|
119
|
+
Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.
|
|
120
|
+
```
|
|
121
|
+
|
|
117
122
|
### 追記２：App.tsx側のソースコード追加
|
|
118
123
|
App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。
|
|
119
124
|
```
|
8
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
```
|
|
116
116
|
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
117
117
|
### 追記２：App.tsx側のソースコード追加
|
|
118
|
-
App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。
|
|
118
|
+
App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。
|
|
119
119
|
```
|
|
120
120
|
Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
|
|
121
121
|
```
|
7
質問とは別のエラー解決
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
```
|
|
116
116
|
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
117
117
|
### 追記２：App.tsx側のソースコード追加
|
|
118
|
-
App.tsx側にもエラーが表示されていたので追記です。
|
|
118
|
+
App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。以前、質問のエラーは残っています。
|
|
119
119
|
```
|
|
120
120
|
Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
|
|
121
121
|
```
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
|
|
130
130
|
import './components/common/styles/ress.css';
|
|
131
131
|
import Home from './components/pages/Home/home';
|
|
132
|
-
import
|
|
132
|
+
import ElementContainer from './containers/pages/Element/element';
|
|
133
133
|
|
|
134
134
|
//cssの省略
|
|
135
135
|
|
|
@@ -141,8 +141,7 @@
|
|
|
141
141
|
<Home />
|
|
142
142
|
</Route>
|
|
143
143
|
<Route exact path="/elm">
|
|
144
|
-
//ここのElementへエラーが表示される
|
|
145
|
-
<
|
|
144
|
+
<ElementContainer />
|
|
146
145
|
</Route>
|
|
147
146
|
</Switch>
|
|
148
147
|
</BrowserRouter>
|
|
@@ -150,8 +149,4 @@
|
|
|
150
149
|
);
|
|
151
150
|
export default App;
|
|
152
151
|
|
|
153
|
-
```
|
|
152
|
+
```
|
|
154
|
-
少し混乱しているのですが、見た目側は「components」、関数やもろもろの処理側は「containers」で分けておりファイル構造は両者ともに同じになるように対応しています。
|
|
155
|
-
Reactは親から子コンポーネントへの受け渡しが原則ですが、<Element />はApp側とcontainers側で呼び出しており、App側から<Element />へは何も渡しておりません。containers側からは<Element result={result}/>を渡しております。
|
|
156
|
-
|
|
157
|
-
この書き方がアウトだったのでしょうか。（今からcontainers側のコンポーネントとして置き換えてみますが近況です。また追記修正すかもしれませんが行き違えていたらすみません）
|
6
追記情報と一部の内容の位置を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
上記のように怒られます。
|
|
14
14
|
### 該当のソースコード
|
|
15
|
-
|
|
15
|
+
containers/Element/element.tsx側
|
|
16
16
|
```ここに言語名を入力
|
|
17
17
|
import React, { FC } from 'react';
|
|
18
18
|
import Element from '../../../components/pages/Element/element';
|
|
@@ -67,7 +67,10 @@
|
|
|
67
67
|
cssはEmotion
|
|
68
68
|
バックエンドはFirebaseを利用します
|
|
69
69
|
|
|
70
|
+
追記：Reactの型に"@types/react": "^16.9.0"を使っています。
|
|
71
|
+
|
|
70
|
-
### <Element />側のソースコード
|
|
72
|
+
### 追記１：<Element />側のソースコード
|
|
73
|
+
components/Element/element.tsx側
|
|
71
74
|
```
|
|
72
75
|
/** @jsx jsx */
|
|
73
76
|
import { Fragment, FC } from 'react';
|
|
@@ -111,5 +114,44 @@
|
|
|
111
114
|
|
|
112
115
|
```
|
|
113
116
|
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
117
|
+
### 追記２：App.tsx側のソースコード追加
|
|
118
|
+
App.tsx側にもエラーが表示されていたので追記です。
|
|
119
|
+
```
|
|
120
|
+
Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)
|
|
121
|
+
```
|
|
114
122
|
|
|
123
|
+
```Appソース
|
|
124
|
+
/** @jsx jsx */
|
|
125
|
+
import { FC } from 'react';
|
|
126
|
+
import { css, jsx } from '@emotion/core';
|
|
127
|
+
import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
|
128
|
+
import { Font, Color } from './components/common/styles/CssValue';
|
|
129
|
+
|
|
130
|
+
import './components/common/styles/ress.css';
|
|
131
|
+
import Home from './components/pages/Home/home';
|
|
132
|
+
import Element from './components/pages/Element/element';
|
|
133
|
+
|
|
134
|
+
//cssの省略
|
|
135
|
+
|
|
136
|
+
const App: FC = () => (
|
|
137
|
+
<div css={Global}>
|
|
138
|
+
<BrowserRouter>
|
|
139
|
+
<Switch>
|
|
115
|
-
|
|
140
|
+
<Route exact path="/">
|
|
141
|
+
<Home />
|
|
142
|
+
</Route>
|
|
143
|
+
<Route exact path="/elm">
|
|
144
|
+
//ここのElementへエラーが表示される
|
|
145
|
+
<Element />
|
|
146
|
+
</Route>
|
|
147
|
+
</Switch>
|
|
148
|
+
</BrowserRouter>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
export default App;
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
少し混乱しているのですが、見た目側は「components」、関数やもろもろの処理側は「containers」で分けておりファイル構造は両者ともに同じになるように対応しています。
|
|
155
|
+
Reactは親から子コンポーネントへの受け渡しが原則ですが、<Element />はApp側とcontainers側で呼び出しており、App側から<Element />へは何も渡しておりません。containers側からは<Element result={result}/>を渡しております。
|
|
156
|
+
|
|
157
|
+
この書き方がアウトだったのでしょうか。（今からcontainers側のコンポーネントとして置き換えてみますが近況です。また追記修正すかもしれませんが行き違えていたらすみません）
|
5
ライブラリ情報の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -110,4 +110,6 @@
|
|
|
110
110
|
export default Element;
|
|
111
111
|
|
|
112
112
|
```
|
|
113
|
-
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
113
|
+
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
|
114
|
+
|
|
115
|
+
Reactの型に"@types/react": "^16.9.0"を使っています。
|
4
エラーメッセージの記載もれを追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
### 発生している問題・エラーメッセージ
|
|
6
6
|
子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます
|
|
7
7
|
```
|
|
8
|
-
Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
|
|
8
|
+
Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'.
|
|
9
|
-
Property 'result' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
|
|
9
|
+
Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'
|
|
10
10
|
```
|
|
11
|
+
（7.11追記：↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。）
|
|
12
|
+
|
|
11
13
|
上記のように怒られます。
|
|
12
14
|
### 該当のソースコード
|
|
13
15
|
|
3
Element要素のソースを追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,4 +63,49 @@
|
|
|
63
63
|
### 補足情報（FW/ツールのバージョンなど）
|
|
64
64
|
React+TypeScriptです。
|
|
65
65
|
cssはEmotion
|
|
66
|
-
バックエンドはFirebaseを利用します
|
|
66
|
+
バックエンドはFirebaseを利用します
|
|
67
|
+
|
|
68
|
+
### <Element />側のソースコード
|
|
69
|
+
```
|
|
70
|
+
/** @jsx jsx */
|
|
71
|
+
import { Fragment, FC } from 'react';
|
|
72
|
+
import { css, jsx } from '@emotion/core';
|
|
73
|
+
|
|
74
|
+
import Header from '../../common/templates/header';
|
|
75
|
+
import Footer from '../../common/templates/footer';
|
|
76
|
+
import SocialBtn from '../../common/parts/button/social';
|
|
77
|
+
import StuffFilter from '../../common/parts/filter/stuffFilter';
|
|
78
|
+
|
|
79
|
+
import { Font } from 'components/common/styles/CssValue';
|
|
80
|
+
import { dammyType } from '../../../seed/dammy';
|
|
81
|
+
|
|
82
|
+
//cssの記述を省略
|
|
83
|
+
|
|
84
|
+
const Element: FC<dammyType[]> = (result) => (
|
|
85
|
+
<Fragment>
|
|
86
|
+
<Header />
|
|
87
|
+
<div css={content}>
|
|
88
|
+
<div css={titleH1}>
|
|
89
|
+
//titleのテキスト
|
|
90
|
+
</div>
|
|
91
|
+
<div css={socialSpace}>
|
|
92
|
+
<SocialBtn />
|
|
93
|
+
</div>
|
|
94
|
+
<div css={article}>
|
|
95
|
+
<p>
|
|
96
|
+
//記事のテキスト
|
|
97
|
+
</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div>
|
|
100
|
+
//孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい
|
|
101
|
+
{result}
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<Footer />
|
|
105
|
+
</Fragment>
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
export default Element;
|
|
109
|
+
|
|
110
|
+
```
|
|
111
|
+
子コンポーネント側ではエラー表示はありませんが上記のようになっています。
|
2
誤字を修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
export default ElementContainer;
|
|
31
31
|
|
|
32
32
|
```
|
|
33
|
-
<Element result={result} />の「result={result}のresult」に対して怒られています。
|
|
33
|
+
<Element result={result} />の「result={result}のresult=」に対して怒られています。
|
|
34
34
|
|
|
35
35
|
dammyData と { dammyType } ファイル中身は以下の通りです
|
|
36
36
|
```
|
1
誤字を修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
子コンポーネント(UI側)にデータを渡したいです。
|
|
4
4
|
|
|
5
5
|
### 発生している問題・エラーメッセージ
|
|
6
|
-
子コンポーネント(UI側)へ
|
|
6
|
+
子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます
|
|
7
7
|
```
|
|
8
8
|
Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
|
|
9
9
|
Property 'result' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
|