Ant Design Table 组件自定义 render 的作用域，解决找不到 this 问题。

忘是亡心i 2022-11-21 15:16 275阅读 0赞

今天在使用 Ant Design Table 组件时遇到了一个问题，当我自定义一个 colunm 的 render 函数时，这个render 函数里找不到 this.state 中的状态。

简单复现一下：

class Demo extends React.Component { 
      state = { 
        action: 'delete',
        columns: [
          { 
            title: 'Action',
            key: 'action',
            render: this.renderAction,
          },
        ],
      };
    
      renderAction() { 
        // 找不到 state
        return <a>{ this.state.delete}</a>;
      }
      
      // ...
    
    	render() { 
        return <Table columns={ columns} dataSource={ this.data} />;
      }
    }

这是因为column render 函数渲染出来的是一个子组件，也就是说 renderAction 中的 this 已经不是指向 Demo，而是指向当前render 出来的元素。

因此可以通过 JavaScript 的 bind 方法，为 renderAction 绑定一下状态即可。

columns: [
          { 
            title: 'Action',
            key: 'action',
            render: this.renderAction.bind(this),  // 更改了这里
          },
        ],

另外也可以使用箭头函数，利用箭头函数作用域的特性，写起来会更简洁一些：

columns: [
          { 
            title: 'Action',
            key: 'action',
            render: ()=>{ return this.renderAction()},  // 更改了这里
          },
        ],

在 React 的事件中，也经常会出现这种作用域的问题。举个例子：

给 button 绑定了一个点击事件，那么这个事件应该如何定义呢。

有两种方法，一是使用函数定义，而是使用箭头函数的方式。

onClick() { 
      // you code
    }
    
    onClick = () => { 
      
    }

这样很好理解，那如果我需要给 onClick 传递一个参数呢？onClick 应该如何定义呢？

首先我们要理解，Button 中的 onClick 接受的是一个事件，也就是函数，所以我们在定义这个 onClick 事件时，也需要返回一个函数。

onClick (index) { 
      return function() { 
        // your code
      }
    }
    
    onClick = index => () => { 
      
    }

为什么使用箭头函数要有两个箭头呢？应为 `this.onClick` 指向的是函数本身，如果使用一个箭头，并不是返回函数对象，而是函数里的内容，所以需要再包裹一个箭头函数。

而且很明显，箭头函数看起来更加的清晰。

写得很杂乱，纯属记录一下。