antd Table 组件 columns 列定义 render 属性问题

背景

上周玩了两天 React,用 React + antd + Table 实现一个简单的列表功能,列表组件渲染时,this 对象跟当前组件定义不是同一个,导致定位不到对应的操作事件。

columns

const columns = [{
    title: '简介',
    width: '20%',
    dataIndex: 'remark',
}, {
    title: '操作',
    width: '25%',
    dataIndex: 'id',
    // 操作列跳转,且传递 ID 参数
    render:(text,record) =>(
<div>
  <Link style={btnStyle} to={"/toDetail/"+record.id}><Button size='small' type="default">详情</Button></Link>
  <Link style={btnStyle} to={"/toEdit/"+record.id}><Button size='small' type="primary">编辑</Button></Link>
  <Button style={btnStyle} onClick={()=>{this.remove(record)}} size='small' type="danger">删除</Button>
</div>
)
}]

属性的方式,但是个函数,也没问题,this. 能拿到对应的方法。

render:(text,record)=> {
  return (
      <div>
          <Link style={btnStyle} to={"/toDetail/"+record.id}><Button size='small' type="default">详情</Button></Link>
          <Link style={btnStyle} to={"/toEdit/"+record.id}><Button size='small' type="primary">编辑</Button></Link>
          <Button style={btnStyle} onClick={()=>{this.remove(record)}} size='small' type="danger">删除</Button>
      </div>
  )
}

有问题的方法

另一种方式直接写函数的做法,指针指向不明,无法定位到对应的方法。

{
 title: '操作',
 width: '25%',
 dataIndex: 'id',
 // 操作列跳转,且传递 ID 参数
 render(text,record) {
     return (
         <div>
             <Link style={btnStyle} to={"/toDetail/"+record.id}><Button size='small' type="default">详情</Button></Link>
             <Link style={btnStyle} to={"/toEdit/"+record.id}><Button size='small' type="primary">编辑</Button></Link>
             <Button style={btnStyle} onClick={()=>{this.remove(record)}} size='small' type="danger">删除</Button>
         </div>
     )
 }
}

这段代码就报错:
在这里插入图片描述
这个是从 GitHub 上的一个项目中拷贝的代码,简单跳转没问题,但是有需要调用其他方法的时候就过不去。

为什么呢?

属性 render:(text,record)=> {} 和直接提供一个函数 render(text,record) 的区别是什么,为何差距这么大呢?

看官方示例都是第一种,render: 函数

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值