回答編集履歴

2

条件付きレンダリングの回避について

2021/01/07 08:30

投稿

A_kirisaki
A_kirisaki

スコア2853

test CHANGED
@@ -33,3 +33,39 @@
33
33
  追記:
34
34
 
35
35
  というかよく見たら `src` しか変わってないので条件付きレンダリングまでやる意味ないですね。`src` 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。
36
+
37
+
38
+
39
+ 追記 2:
40
+
41
+ 以下のように URL を事前に用意してしまえば条件付きレンダリングを書かなくてもよいです。
42
+
43
+ ```JavaScript
44
+
45
+ let imgUrl = 'default_url'
46
+
47
+ if (condition){
48
+
49
+ imgUrl = 'some_url'
50
+
51
+ else if (another_condition){
52
+
53
+ imgUrl = 'other_url'
54
+
55
+ }
56
+
57
+ ...
58
+
59
+ return (
60
+
61
+ <div class={s.upload__icon__inner} onClick={onClick}>
62
+
63
+ <img className={s.upload__img} src={imgUrl} alt="profile icon" />
64
+
65
+ {props.icon}
66
+
67
+ </div>
68
+
69
+ )
70
+
71
+ ```

1

よく見た

2021/01/07 08:30

投稿

A_kirisaki
A_kirisaki

スコア2853

test CHANGED
@@ -27,3 +27,9 @@
27
27
  ```
28
28
 
29
29
  というのは `P ? (!P ? A : B) : C` という形であり、`A` には絶対たどり着けない謎の条件式です。
30
+
31
+
32
+
33
+ 追記:
34
+
35
+ というかよく見たら `src` しか変わってないので条件付きレンダリングまでやる意味ないですね。`src` 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。