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等等去改变。