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

不拆分的情况下

把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)}
/>
}

此时传递额shoumodal,必须是 箭头函数吗

箭头函数的this,在定义的时候,就确定死了。不会再变。也不能用apply,bind等等去改变。

posted @ 2024-01-12 14:05  风意不止  阅读(218)  评论(0编辑  收藏  举报