怎么编写插件机制优化基于Antd Table封装表格的混乱代码

而缩进线相关的逻辑则抽取成 useIndentLinePlugin：

export const useIndentLinePlugin: TreeTablePlugin = (   props: ResolvedProps,   context: TreeTablePluginContext ) => {   const { expandedRowKeys } = context;   const onColumn = column => {     column.onCell = record => {       return {         record,         ...column,       };     };   };    const components = {     body: {       cell: cellProps => (         <IndentCell           {...props}           {...cellProps}           expandedRowKeys={expandedRowKeys}         />       ),     },   };    return {     components,     onColumn,   }; };

至此，主函数被精简到 150 行左右，新功能相关的函数全部被移到插件目录中去了，无论是想要新增或者删减、开关功能都变的非常容易。

此时的目录结构：

目录结构

“怎么编写插件机制优化基于Antd Table封装表格的混乱代码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！