React loop循环组建component

效果图：

----------------------------------

| tab1 | tab2 | tab3 | tab4 |

| desc | desc | desc |desc |

----------------------------------

 

原始component

  <TabPane label={getLabel('Introduction', i18n)}>
    <IntroductionPane i18n={i18n} />
  </TabPane>
  <TabPane
    label={getLabel('DailyROI', i18n)}
    subLabel={getLabel('winUpToDaily', i18n)}
  >
    <DailyROIPane i18n={i18n} />
  </TabPane>
  <TabPane
    label={getLabel('WeeklyProfit', i18n)}
    subLabel={getLabel('winUpToWeekly', i18n)}
  >
    <WeeklyProfitPane i18n={i18n} />
  </TabPane>
  <TabPane
    label={getLabel('MonthlyProfit', i18n)}
    subLabel={getLabel('winUpToMonthly', i18n)}
  >
    <MonthlyProfitPane i18n={i18n} />
  </TabPane>

 

改进为动态创建tab

tabs JSON

"tabs": [
    {"label": "Introduction", "subLabel": ""},
    {"label": "DailyROI", "subLabel": "winUpToDaily"},
    {"label": "WeeklyProfit", "subLabel": "winUpToWeekly"},
    {"label": "MonthlyProfit", "subLabel": "winUpToMonthly"}
  ]

 

创建动态组建关键步骤，添加到数组里面

const tabComps = [IntroductionPane, DailyROIPane, WeeklyProfitPane, MonthlyProfitPane]
const tabs = data.tabs.map((v, i) => ({...v, comp: tabComps[i]}))

 

最好render步骤：

{
tabs.map(v =>
  <TabPane key={v.label} label={getLabel(v.label, i18n)} subLabel={getLabel(v.subLabel, i18n)}>
    {v.comp({i18n})}
  </TabPane>)
}

 

Core code： {v.comp({i18n})}