teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

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

2021/01/07 08:30

投稿

A_kirisaki
A_kirisaki

スコア2853

answer CHANGED
@@ -15,4 +15,22 @@
15
15
  というのは `P ? (!P ? A : B) : C` という形であり、`A` には絶対たどり着けない謎の条件式です。
16
16
 
17
17
  追記:
18
- というかよく見たら `src` しか変わってないので条件付きレンダリングまでやる意味ないですね。`src` 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。
18
+ というかよく見たら `src` しか変わってないので条件付きレンダリングまでやる意味ないですね。`src` 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。
19
+
20
+ 追記 2:
21
+ 以下のように URL を事前に用意してしまえば条件付きレンダリングを書かなくてもよいです。
22
+ ```JavaScript
23
+ let imgUrl = 'default_url'
24
+ if (condition){
25
+ imgUrl = 'some_url'
26
+ else if (another_condition){
27
+ imgUrl = 'other_url'
28
+ }
29
+ ...
30
+ return (
31
+ <div class={s.upload__icon__inner} onClick={onClick}>
32
+ <img className={s.upload__img} src={imgUrl} alt="profile icon" />
33
+ {props.icon}
34
+ </div>
35
+ )
36
+ ```

1

よく見た

2021/01/07 08:30

投稿

A_kirisaki
A_kirisaki

スコア2853

answer CHANGED
@@ -12,4 +12,7 @@
12
12
  {thumgnailMediumImageUrl ? (
13
13
  !thumgnailMediumImageUrl ? (
14
14
  ```
15
- というのは `P ? (!P ? A : B) : C` という形であり、`A` には絶対たどり着けない謎の条件式です。
15
+ というのは `P ? (!P ? A : B) : C` という形であり、`A` には絶対たどり着けない謎の条件式です。
16
+
17
+ 追記:
18
+ というかよく見たら `src` しか変わってないので条件付きレンダリングまでやる意味ないですね。`src` 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。