1
不想写代码偷懒之配置化
发布于: 2021 年 04 月 02 日
遇到的问题
前端做表格时，虽然 AntD Table 已经做得很好，表格列的配置描述和数据数组通过配置就能完成大部分功能，如下：
const dataSource = [ { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', }, { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号', },];
const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '住址', dataIndex: 'address', key: 'address', },];
<Table dataSource={dataSource} columns={columns} />;复制代码
但遇到表格里面用到自定义组件时，就不能再保持单纯的配置了，如下：
import { Table, Tooltip } from 'antd';
const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: text => <a>{text}</a>, width: 150, }, { title: 'Age', dataIndex: 'age', key: 'age', width: 80, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: { showTitle: false, }, render: address => ( <Tooltip placement="topLeft" title={address}> {address} </Tooltip> ), }, { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: { showTitle: false, }, render: address => ( <Tooltip placement="topLeft" title={address}> {address} </Tooltip> ), }, { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: { showTitle: false, }, render: address => ( <Tooltip placement="topLeft" title={address}> {address} </Tooltip> ), }, { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: { showTitle: false, }, render: address => ( <Tooltip placement="topLeft" title={address}> {address} </Tooltip> ), },];
const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', },];
<Table columns={columns} dataSource={data} />；复制代码
这时需要将自定义组件进一步改造成可以通过配置生成的。最终希望能做成 Echarts 那样的超级组件，像折线图堆叠这个例子中的配置，如下：
option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ]};
option && myChart.setOption(option);复制代码
分析 &设计
以终为始，自定义组件需要能识别，所以得有个 type 类型来指定自定义组件的名字，如下增加 link 和 tooltip 2 个类型：
{ title: 'Name', dataIndex: 'name', key: 'name', render: { type: 'link' }, width: 150, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: { showTitle: false, }, render: { type: 'tooltip' }, }复制代码
然后就是组件需要用到的参数，为了达到像 ECharts 那样完全纯文本的配置，需要将组件的参数提取出来，放到配置中，如下：
render: { type: 'tooltip', props: { placement: "topLeft" },},复制代码
为了将 2 者关联起来，需要一个注册机制，把组件按 type 注册到某个地方，在此用一个对象代替：
const components = { link: (props) => (text: any) => <a>{text}</a>, tooltip: (props) => (address) => <Tooltip {...props} title={address}> {address} </Tooltip>}复制代码
最后，封装一个 hooks 传入纯文本的配置，返回 AntD Table 需要的 columns，如下：
const useColumns = (columns) => { const result = columns.map(it => { return { ...it, render: it.render ? components[it.render.type](it.render.props) : undefined } })}复制代码
划线
评论
复制
发布于: 2021 年 04 月 02 日阅读数: 70
版权声明: 本文为 InfoQ 作者【顿晓】的原创文章。
原文链接:【http://xie.infoq.cn/article/7dbfaad98eb3cfad13bfec004】。文章转载请联系作者。
顿晓
关注
因观黑白愕然悟，顿晓三百六十路。 2017.10.17 加入
视频号「编程日课」 知识星球「俺的死党顶」
评论