質問編集履歴

1

コードの文法の修正

2020/06/14 17:31

投稿

Sean2014
Sean2014

スコア59

test CHANGED
File without changes
test CHANGED
@@ -84,6 +84,10 @@
84
84
 
85
85
  <table>
86
86
 
87
+ <thead>
88
+
89
+ <tr>
90
+
87
91
  <th>ID</th>
88
92
 
89
93
  <th>Word (OL)</th>
@@ -96,9 +100,149 @@
96
100
 
97
101
  <th>Created Date</th>
98
102
 
103
+ </tr>
104
+
105
+ </thead>
106
+
107
+ <tbody>
108
+
109
+ {this.state.wordsData.map(singleWord=>
110
+
111
+ <RowCreator
112
+
113
+ id={singleWord.id}
114
+
115
+ ownLangWordName={singleWord.ownLangWordName}
116
+
117
+ targetLangWordName={singleWord.targetLangWordName}
118
+
119
+ ownLangExSentence={singleWord.ownLangExSentence}
120
+
121
+ targetLangExSentence={singleWord.targetLangExSentence}
122
+
123
+ createdDate={singleWord.createdDate}
124
+
125
+ />)}
126
+
127
+ </tbody>
128
+
99
129
  </table>
100
130
 
101
- <tbody>
131
+ </div>
132
+
133
+ )
134
+
135
+ }
136
+
137
+ }
138
+
139
+
140
+
141
+ class RowCreator extends React.Component<Word>{
142
+
143
+
144
+
145
+ render(){
146
+
147
+ let word = this.props;
148
+
149
+ return(
150
+
151
+ <tr>
152
+
153
+ <td>{word.id}</td>
154
+
155
+ <td>{word.ownLangWordName}</td>
156
+
157
+ <td>{word.targetLangWordName}</td>
158
+
159
+ <td>{word.ownLangExSentence}</td>
160
+
161
+ <td>{word.targetLangExSentence}</td>
162
+
163
+ <td>{word.createdDate}</td>
164
+
165
+ </tr>
166
+
167
+ )
168
+
169
+ }
170
+
171
+ }
172
+
173
+
174
+
175
+ export default Home;
176
+
177
+ ```
178
+
179
+
180
+
181
+ TypeScriptのSyntaxに合わせるためにチュートリアルの部分と変えた所といえば、
182
+
183
+
184
+
185
+ ```
186
+
187
+ state = {
188
+
189
+ patientData:[]
190
+
191
+ }
192
+
193
+ ```
194
+
195
+
196
+
197
+ ```
198
+
199
+ state = {
200
+
201
+ wordsData:new Array<Word>()
202
+
203
+ }
204
+
205
+ ```
206
+
207
+ に、それから
208
+
209
+
210
+
211
+ ```
212
+
213
+ class RowCreator extends React.Component{
214
+
215
+ ...
216
+
217
+ ```
218
+
219
+
220
+
221
+
222
+
223
+ ```
224
+
225
+ class RowCreator extends React.Component<Word>{
226
+
227
+ ...
228
+
229
+ ```
230
+
231
+ にしたぐらいです。
232
+
233
+
234
+
235
+ 僕がこれまで自分で勉強したり調べたりして現時点でわかっているのは、TypeScriptはJavaScriptの厳密なスーパーセットであり、JavaScriptで有効なコードはTypeScriptでも全て有効になるはずだという事です。また、TypeScriptはVisual Studio Codeでならコードを書いている時点で何か間違いがあればプログラムを実行する前からエラーがマークアップされて表示されるのですぐに間違いに気づけるとも聞いているのですが、全部エラーのマークアップが消えた後でRun timeでこのようなエラーが出てしまう理由がよくわかりません。
236
+
237
+
238
+
239
+ TypeScriptで
240
+
241
+
242
+
243
+ ```
244
+
245
+ <tbody>
102
246
 
103
247
  {this.state.wordsData.map(singleWord=>
104
248
 
@@ -120,146 +264,6 @@
120
264
 
121
265
  </tbody>
122
266
 
123
- </div>
124
-
125
- )
126
-
127
- }
128
-
129
- }
130
-
131
-
132
-
133
- class RowCreator extends React.Component<Word>{
134
-
135
-
136
-
137
- render(){
138
-
139
- let word = this.props;
140
-
141
- return(
142
-
143
- <div>
144
-
145
- <tr>
146
-
147
- <td>{word.id}</td>
148
-
149
- <td>{word.ownLangWordName}</td>
150
-
151
- <td>{word.targetLangWordName}</td>
152
-
153
- <td>{word.ownLangExSentence}</td>
154
-
155
- <td>{word.targetLangExSentence}</td>
156
-
157
- <td>{word.createdDate}</td>
158
-
159
- </tr>
160
-
161
- </div>
162
-
163
- )
164
-
165
- }
166
-
167
- }
168
-
169
-
170
-
171
- export default Home;
172
-
173
- ```
174
-
175
-
176
-
177
- TypeScriptのSyntaxに合わせるためにチュートリアルの部分と変えた所といえば、
178
-
179
-
180
-
181
- ```
182
-
183
- state = {
184
-
185
- patientData:[]
186
-
187
- }
188
-
189
- ```
190
-
191
-
192
-
193
- ```
194
-
195
- state = {
196
-
197
- wordsData:new Array<Word>()
198
-
199
- }
200
-
201
- ```
202
-
203
- に、それから
204
-
205
-
206
-
207
- ```
208
-
209
- class RowCreator extends React.Component{
210
-
211
- ...
212
-
213
- ```
214
-
215
-
216
-
217
-
218
-
219
- ```
220
-
221
- class RowCreator extends React.Component<Word>{
222
-
223
- ...
224
-
225
- ```
226
-
227
- にしたぐらいです。
228
-
229
-
230
-
231
- 僕がこれまで自分で勉強したり調べたりして現時点でわかっているのは、TypeScriptはJavaScriptの厳密なスーパーセットであり、JavaScriptで有効なコードはTypeScriptでも全て有効になるはずだという事です。また、TypeScriptはVisual Studio Codeでならコードを書いている時点で何か間違いがあればプログラムを実行する前からエラーがマークアップされて表示されるのですぐに間違いに気づけるとも聞いているのですが、全部エラーのマークアップが消えた後でRun timeでこのようなエラーが出てしまう理由がよくわかりません。
232
-
233
-
234
-
235
- TypeScriptで
236
-
237
-
238
-
239
- ```
240
-
241
- <tbody>
242
-
243
- {this.state.wordsData.map(singleWord=>
244
-
245
- <RowCreator
246
-
247
- id={singleWord.id}
248
-
249
- ownLangWordName={singleWord.ownLangWordName}
250
-
251
- targetLangWordName={singleWord.targetLangWordName}
252
-
253
- ownLangExSentence={singleWord.ownLangExSentence}
254
-
255
- targetLangExSentence={singleWord.targetLangExSentence}
256
-
257
- createdDate={singleWord.createdDate}
258
-
259
- />)}
260
-
261
- </tbody>
262
-
263
267
  ```
264
268
 
265
269