526互联

antd中columns中配置的操作，如何，调用函数组件中的方法

发布时间 2024-01-12 14:05:47作者: 风意不止

不拆分的情况下

把columns配置，写在函数组件内部。
把相关的操作，也全部写在函数组件内部。

拆分的话

1.columns的render函数中，有个actionref，可以传递dom实例上的操作方法。
2.其他方法，可以使用hooks方法进行传递。
useColumns.tsx

export  const useColumns=(fn)=>{
    
const columns=[
//  这里是pro-table的某个片段，如果是antd table，请注意区别并修改
  
{
          title: '操作',
          with:'200',
          fixed:'right',
          valueType: 'option',
          key: 'option',
          render: (text, record, _, action) => [
           
            <a href={record.url} >详情</a>,
            <a onClick={fn} >备注</a>,   //这里使用了fn
            <a href={record.url} >已解决</a>,
         
          ],
  }
]

return columns
    
}

list.tsx

import {useColumns} from './columns'
export function list=（）=>{

 return <ProTable
        rowKey={record => record.backlogId}
        columns={useColumns(showModal)}
/>
}