效果图:
----------------------------------
| 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})}
相关推荐
React Web组件可作为npm上的react-web-component软件包使用。 yarn add react-web-component 基本用法 要创建带有react-web-component ,只需将React组件作为第一个参数传递给ReactWebComponent.create ,并将您要...
React砌体组件IE8支持如果您希望获得IE8支持,那么带有React 0.14的v2是...基本用法npm install --save react-masonry-component import * as React from 'react' ;import Masonry from 'react-masonry-component' ;
npm install --save react-frame-component 如何使用: import Frame from 'react-frame-component' ; 去看一下。 const Header = ({ children }) = > ( < Frame > < h1> {children} </ Frame > ...
React终端组件呈现终端仿真器的React组件 React Terminal Component是一个由支持的可自定义的React组件。 这个React组件的一些很酷的功能是: 模拟器主题内存文件系统内置命令,如ls , cd , head , cat , echo ...
react-ueditor-component ueditor的react封装版,修改了ueditor中的获取服务器端配置实现,更符合前后端分离的思想 使用assets中的utf8-php.zip才能正常使用上传文件功能,所有ueditor源码改动都用MARK:做了标记,...
React.Component的声明版本,Declarative version of React.Component。
react-async-component加载异步组件异步加载moduleInstall$ npm i react-async-component --save
yarn add react-build-component --dev 您不想将其安装到您的软件包中吗? 没问题,那就用npx:flexed_biceps_light_skin_tone: npx react-build-component 通过将reactBuildComponent添加到packages.json中来配置要...
yarn add react-pose react-offcanvas-component npm npm i -S react-pose react-offcanvas-component 事态发展 此Commitizen使用Commitizen进行git commit约定。 运行yarn commit或npm run commit 系统将提示...
react-to-webcomponent将组件转换为! 它可以让你分享React组件不需要安装是通过阵营本土元素。 custom元素充当基础react组件的包装器。 以与使用标准HTML元素相同的方式在任何框架(vue,svelte,angular,ember,...
哪里:React Loop 2019,伊利诺伊州芝加哥 时间:2019年6月21日 视频 回购 我在演讲中使用的仓库在这里: : 例子 我在这次演讲中构建的所有示例都在这里: : 大纲 我是谁? “组成”是什么意思? 离散行为 可以...
React表组件 通用的React Table组件。 桌子 Table组件接收数据和模式,并相应地呈现表。 源代码位于src/components/Table.jsx 。 道具 数据 JSON对象的集合 图式 描述表的结构,样式和呈现的对象 图式 模式对象中的...
React自定义组件组件import { ScrollBar , FancyButton , FancyButtonGroup , Slider , Modal , Loader , Popup , FancyText ,} from '@evanhongo/react-custom-component'滚动条道具类型描述宽度{细绳} 进度条的...
React文本循环 标题的文本节点的动画循环。 使用进行过渡,因此可以处理超快动画和spring参数。安装npm install react-text-loop或yarn add react-text-loop如何使用 您还可以通过克隆仓库和运行yarn start来运行...
$ npm install react-calendar-component注意:npm名称是react-calendar-component ! 这是用于使用React渲染每月日历的低级组件。 该组件将调用您提供的renderDay和renderHeader函数,以为给定Date的月份创建日历...
本人学习react的心得笔记,react循环算某字段和的两种方式,简单有用易懂。
用法import ReactLoader from ' react-loader-component ' ;const MyComponent = ReactLoader ({ loadingComponent : props => (< p>Loading), errorComponent : props => (< p>There was an error: { JSON . ...
前端开源库-react-frame-componentreact frame组件,react组件将应用程序或组件包装在iframe中以进行封装
安装 npm install --save react-image-component用法 const Image = require ( 'react-image-component' )React . renderComponent ( < Image xss=removed xss=removed xss=removed> , mountNode)
react-quiz-component是一个ReactJS组件,允许用户尝试测验。 特征 基于JSON的输入 测验登陆页面,显示标题,简介和问题数量 测验输入验证器 多个答案和一个正确答案 多个答案与多个正确答案 支持文字和图片答案 ...