请问,一个特定的位置要在不同情况下展示不同的UI内容,最好的做法是否是做不同的组件进行加载呢?

需求:
有如下蓝色的UI界面,操作区是用于承载不同类型操作的功能。
在上面的操作按钮,那么操作区域就显示不同的操作界面。
image.png

1、请问这样的功能应该如何设计呢?
是否是通常的做法先把3个操作的对应的UI组件设计好,然后点击按钮的时候,进行加载对应的组件?
2、还是说有其他的更好的方式做到呢?

阅读 1.3k
1 个回答

这种情况你其实可以对标常见框架的Tab组件的设计;
至于是否是点击时加载对应的组件,个人认为还是取决于业务;
1.在绝大多数情况下,为了代码的结构清晰,便于维护,逻辑分离等,设计时各组件分离,组件内各自处理逻辑,用户主动触发点击才去渲染组件,当然这个过程中需要考虑切换时的数据加载过程,比如要加loading等;这种方式弊端可能在于需要父子组件的数据传递,父组件获取子组件的数据状态等场景就麻烦了点;
2.另外一种方式:把组件1组件2等都写在一起,状态可以共用了,但降低了代码的可维护性,而且一堆逻辑,会越补越多;
3.基于第一种的方式,如果组件1组件2的UI相似,比如都是表格,那完全可以做一个表格的公共组件,用不同的数据配置来渲染,也就是点击按钮的时候,切换不同的表格配置,从而渲染;比如下面的表头的配置():

const columns = activeKey === "1" ? column1 : column2;
export const columns1 = [
  {key: 'serial',title: '序号',dataIndex: 'serial',align: 'center'},
  { key: 'name', dataIndex: 'name', title: '姓名', align: 'center' }
]
export const columns2 = [
  {key: 'serial',title: '序号',dataIndex: 'serial',align: 'center'},
  { key: 'sex', dataIndex: 'sex', title: '性别', align: 'center' }
]

<Table columns={columns} />
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏