web-dev-qa-db-ja.com

React短絡（&&）条件付きコンポーネントで何も表示せずに0を表示

コンポーネントを表示するか、何も表示しない次の簡単な短絡ステートメントがあります。

_{profileTypesLoading && <GeneralLoader />}_

ステートメントがfalseの場合、何も表示せずに_0_を表示します。

profileTypesLoadingプロパティのステータスが何であるかを迅速に確認するためにconsole.log(profileTypesLoading)を実行しましたが、期待どおり1または0です。 0はfalseでなければなりません...何もレンダリングしません。右？

なぜこれが起こるのか考えていますか？

reactjscomponentsshort-circuiting
20
Gurnzbot

条件が偽であるため、2番目の引数（<GeneralLoader />）、profileTypesLoadingを返します。これは数値であるため、Reactは typeofbooleanまたはundefined であり、 typeofstringまたはnumber であるものをすべてレンダリングします。

安全にするために、三項式{condition ? <Component /> : null}またはブール値は{!!condition && <Component />}

36
enapupe

は偽の値なので、&&で評価されると0を返します。ただし、はReactであるため、レンダリング可能です：

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing

[〜＃〜] tldr [〜＃〜]

これは、javascript自体が truthyおよびfalsy値 を処理する方法が原因です。

JavaScriptでは、真偽値はブールコンテキストで検出されたときに真と見なされる値です。偽と定義されない限り、すべての値は真実です（つまり、false、0、 ""、null、undefined、およびNaNを除く）。

&&演算子とともに使用すると、返される値は左の値に依存します。

  • 左の値が真実であれば、右の値が返されます。
  • 左の値が偽である場合、その値が返されます。

例：

// Truthy values
1 && "hello" // => "hello"
"a string" && "hello" // => "hello"

// Falsy values
0 && "hello" // => 0
false && "hello" // => false
null && "hello" // => null
undefined && "hello" // => undefined

JavaScriptの構文拡張 であるため、同じルールがJSXに適用されます。ただし、問題は**

問題は、は偽の値であるため、&&で評価されると0を返します。ただし、は、Reactは数値であるため、レンダリング可能です

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing
3
Giovanni Benussi

これにより問題が解決します。

{!!profileTypesLoading && <GeneralLoader />}

0をfalseに変換するため。その理由は、0次の条件は実行されず、JavaScriptの数値のように動作するため、ここでは二重否定が役立ちます。

1
Sakhi Mansoor