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

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

今天在使用 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={this.onClick}/>

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

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

onClick() {
  // you code
}

onClick = () => {
  
}

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

<Button onClick={this.onClick(index)}/>

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

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

onClick = index => () => {
  
}

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

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

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