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

Question

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

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

Answer 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} />