ドアがなければifドアと書きます.

6619 ワード
React テキストリンク
構造で論理を解決しましょう
どうしてそう思うの?
既存のreactコードのreturn部分(jsx)はif文を使用できないため、3つの演算子または&&記号を使用する必要があります.
const currentUserLevel = 'generalUser';

return(
  <ButtonWrapper>
    {currentUserLevel === 'generalUser' && <GeneralUser />}
    {currentUserLevel === 'admin' && <Admin />}
    {currentUserLevel === 'unauthorized' && <UnauthorizedUser />}
  <ButtonWrapper />
)
しかし、この場合、currentUserLevelを確認するプログラムが繰り返されるようだ.
そして、もっと直感的なコードを書きたいです.
どうやって交換したの?objectは、通常、dot notationを使用するが、braket notationを使用して、変数として記憶された鍵の値をロードしてもよい.
const currentUserLevel = 'generalUser';

return(
  <ButtonWrapper>
    {
      {
        generalUser: <GeneralUser />,
        admin: <Admin />,
        unauthorized: <UnauthorizedUser />,
      }[currentUserLevel]
    }
  <ButtonWrapper />
)
objectとしてレンダリングするデータ型を含むHTML.
objectの後ろに[]でcurrentUserLevelのHTMLブロックを引く~
お願いします.
再構築
このような論理を気にするよりも、レンダリング側がどんなものを描くかを一目で見たほうがいい.
const currentUserLevel = 'generalUser';
const buttonGroup = {
   generalUser: <GeneralUser />,
   admin: <Admin />,
   unauthorized: <UnauthorizedUser />
}

return (
  <ButtonWrapper>
    { buttonGroup[currentUserLevel] }
  </ButtonWrapper>
)
現在のプレイヤーレベルに応じてレンダー側がbuttonGroupで出力されているのは異なるでしょう.どの出力が知りたいときだけ、上に行って探してもいいです.
重要な3つの基本的なJavaScriptの概念.
ファイルシステム--mknodシステム呼び出し