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等等去改变。
分类:
92react.js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
2022-01-12 在vue3中使用mitt,达到evenbus的效果