[react]条件レンダリング列挙モード

くどくど言う
私のページでメニューボタンをクリックすると、条件レンダリングとして選択したメニューページを表示する機能が実現します.4つのメニュー?程度が異なるため、3つの演算子または&&演算子は使用できません.だからあまり満足していませんが、ifelsやswitch caseで乱雑な実装を行い、グーグル検索の過程で見つけた方法はenum 패턴 ifelseモードで書かれたコードをenumモードに変換し、コードが非常に簡潔できれいになります!
使用方法
既存のコード🤬

const SelectMenu = ({ selectMenu }) => {
  if (selectMenu === healthSurvey) {
    return <HealthSurvey />;
  } else if (selectMenu === subscription) {
    return <Subscription />;
  } else if ...
};

既存のコードはifelseモードで記述されています.propsに渡されたselectMenuに基づいて、条件付きレンダリングを使用して他の構成部品をレンダリングできます.可読性が悪く、コードが乱れている.🤬
Enumモード

const pages = {
  healthSurvey: <HealthSurvey />,
  subscription: <Subscription />,
  ...
};

const SelectMenu = ({ selectMenu }) => {
  return <div>{pages[selectMenu]}</div>;
};

既存のifelseモードで書かれたコードよりずっと簡潔できれいです!キー、値で構成部品を値に挿入し、キーで構成部品をレンダリングするオブジェクトを作成します.変数による条件付きレンダリングも可能👼