質問編集履歴

1

コンポーネントを分けたコードの詳細を記載

2021/08/11 15:12

投稿

Romay
Romay

スコア40

test CHANGED
File without changes
test CHANGED
@@ -184,12 +184,84 @@
184
184
 
185
185
  ```React
186
186
 
187
+ //import系を全てここに記載
188
+
189
+ import * as React from "react"
190
+
191
+ import {useState, useEffect, createRef} from "react"
192
+
193
+ 省略
194
+
195
+
196
+
197
+
198
+
199
+ //Propsをここに全て記載
200
+
201
+ type Props = {
202
+
203
+ shop: {
204
+
205
+ id: number
206
+
207
+ name: string
208
+
209
+ }
210
+
211
+ 省略
212
+
213
+ }
214
+
215
+
216
+
217
+
218
+
219
+ //CSS系はここに記載
220
+
221
+ const useStyles = makeStyles((theme: Theme) =>
222
+
223
+ createStyles({
224
+
225
+ root: {
226
+
227
+ padding: theme.spacing(1, 2, 1),
228
+
229
+ margin: theme.spacing(7, 0, 5),
230
+
231
+ },
232
+
233
+ 省略
234
+
235
+ })
236
+
237
+ )
238
+
239
+
240
+
241
+
242
+
243
+
244
+
245
+ //以下 UserManagementsMenuの中身, このViewの主な要素はこの中に記載
246
+
187
247
  const UserManagementsMenu: React.FC<Props> = (props: Props) => {
188
248
 
189
249
  const classes = useStyles()
190
250
 
191
251
 
192
252
 
253
+ //hooks系もここに全て記載
254
+
255
+    const [name, setName] = useState(String)
256
+
257
+    const [openItemDialog, setOpenItemDialog] = useState(false)
258
+
259
+ 省略
260
+
261
+   
262
+
263
+
264
+
193
265
 
194
266
 
195
267
  const handleItemCount = (counter: boolean) => {
@@ -222,19 +294,23 @@
222
294
 
223
295
  }
224
296
 
225
- }
297
+ }
298
+
299
+
300
+
226
-
301
+ //他handlerも同様に記載、これらは変更していない
302
+
303
+
304
+
305
+
306
+
307
+
308
+
227
-
309
+ //以下、複数の分けたコンポーネントをここに記載, 全てUserManagementsMenuの中に存在
228
-
229
-
230
-
231
-
232
-
310
+
233
- 省略
311
+ //変更している箇所はここのみ
234
-
235
-
236
-
312
+
237
- const ItemList =() => {
313
+ const ItemList =() => {
238
314
 
239
315
  const classes = useStyles()
240
316
 
@@ -244,113 +320,127 @@
244
320
 
245
321
  )
246
322
 
323
+ }
324
+
325
+
326
+
327
+
328
+
329
+ const ItemDetailDialog =() => {
330
+
331
+ const classes = useStyles()
332
+
333
+ return (
334
+
335
+ <>
336
+
337
+ <Dialog>
338
+
339
+ <DialogContent>
340
+
341
+ <Card>
342
+
343
+ <CardContent>
344
+
345
+ </CardContent>
346
+
347
+ <CardActions>
348
+
349
+ <Grid container spacing={3}>
350
+
351
+ <Grid item xs={3}>
352
+
353
+ <div >
354
+
355
+ <IconButton onClick={() => handleItemCount(false)}>
356
+
357
+ </IconButton>
358
+
359
+ </div>
360
+
361
+ </Grid>
362
+
363
+ <Grid item xs={3}>
364
+
365
+ <div>
366
+
367
+ <Button aria-label="previous">
368
+
369
+ <Typography>
370
+
371
+ {itemCount}
372
+
373
+ </Typography>
374
+
375
+ </Button>
376
+
377
+ </div>
378
+
379
+ </Grid>
380
+
381
+ <Grid item xs={3}>
382
+
383
+ <div className={classes.controls}>
384
+
385
+ <IconButton onClick={() => handleItemCount(true)}>
386
+
387
+ </IconButton>
388
+
389
+ </div>
390
+
391
+ </Grid>
392
+
393
+ </Grid>
394
+
395
+ </CardActions>
396
+
397
+ </Card>
398
+
399
+ </DialogContent>
400
+
401
+ </dialog>
402
+
403
+ </>
404
+
405
+ )
406
+
407
+ }
408
+
409
+
410
+
411
+
412
+
413
+
414
+
415
+ //ここでそれぞれのコンポーネントを呼び出している
416
+
417
+ return (
418
+
419
+ <ThemeTemplate>
420
+
421
+ <Container>
422
+
423
+ <ItemList/>
424
+
425
+ <ItemDetailDialog/>
426
+
427
+ </Container>
428
+
429
+ </ThemeTemplate>
430
+
431
+ )
432
+
247
433
  }
248
434
 
249
435
 
250
436
 
251
-
252
-
253
- const ItemDetailDialog =() => {
254
-
255
- const classes = useStyles()
256
-
257
- return (
258
-
259
- <>
260
-
261
- <Dialog>
262
-
263
- <DialogContent>
264
-
265
- <Card>
266
-
267
- <CardContent>
268
-
269
- </CardContent>
437
+ //ここまでがUserManagementsShopMenu: React.FC<Props> の中身
270
-
271
- <CardActions>
438
+
272
-
439
+
440
+
273
- <Grid container spacing={3}>
441
+ export default UserManagementsMenu
274
-
275
- <Grid item xs={3}>
442
+
276
-
277
- <div >
278
-
279
- <IconButton onClick={() => handleItemCount(false)}>
280
-
281
- </IconButton>
282
-
283
- </div>
284
-
285
- </Grid>
286
-
287
- <Grid item xs={3}>
288
-
289
- <div>
290
-
291
- <Button aria-label="previous">
292
-
293
- <Typography>
294
-
295
- {itemCount}
296
-
297
- </Typography>
298
-
299
- </Button>
300
-
301
- </div>
302
-
303
- </Grid>
304
-
305
- <Grid item xs={3}>
306
-
307
- <div className={classes.controls}>
308
-
309
- <IconButton onClick={() => handleItemCount(true)}>
310
-
311
- </IconButton>
312
-
313
- </div>
314
-
315
- </Grid>
316
-
317
- </Grid>
318
-
319
- </CardActions>
320
-
321
- </Card>
322
-
323
- </DialogContent>
324
-
325
- </dialog>
326
-
327
- </>
443
+ //ここで終わり
328
-
329
- )
330
-
331
- }
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
- //ここでコンポーネントを呼び出している
340
-
341
- return (
342
-
343
- <ThemeTemplate>
344
-
345
- <Container>
346
-
347
- <ItemList/>
348
-
349
- <ItemDetailDialog/>
350
-
351
- </Container>
352
-
353
- </ThemeTemplate>
354
444
 
355
445
  ```
356
446