配置驱动页面内容

背景

显示会议议程页面.议程页面由重复的UI组件构成.

由于议程页面有重复的UI组件,所以通过配置来传入数据,可以极大得提高代码的复用率.

实现细节

配置数组

const arr = [
{
    icon:"/breakfeast.png",
    extend:true,
    avatar:"/job.png",
    bg:true,
    id:[sid1,sid2,sid3]
},
//..
]

核心思路

• 通过className和变量来判断要不要加背景色

• 如果有icon就显示icon 如果有avatar就显示avatar

item?.icon && <img src={item?.icon}>prestige</img>

//有些议程要显示vip标签,也是类似的做法:
item.extend && <img>prestige</img>

结果:

• 如果是有轮播图的,也通过配置实现:

   item.id.length!==0 && (<Carousel>spearkerDom(id)</Carousel>)

const spearkerDom = (id)=> return {
//从配置获取对应的speaker
//这里就显示演讲者的img和文字
}