How does the columns property in antdesign Table relate to a component?

  node.js, question
const columns = [{
 Title:' Declare Batch',
 dataIndex: 'declareBatch',
 sorter: true,
 /*render: name => `${name.first} ${name.last}`,*/
 /* render: () = > countplus, */
 Width: '18%',
 }, {
 Title:' organization to be tested',
 dataIndex: 'admittedOrganization',
 Width: '19%',
 }, {
 Title:' deadline for filing',
 dataIndex: 'dueDate',
 Width: '12%',
 },{
 Title:' appraisal time',
 dataIndex: 'examinationDate',
 render: (msg => (
 < span>{msg[0] plus' ~' plus msg[1]}</span >
 )),
 Width: '20%',
 },{
 Title:' status',
 dataIndex: 'type',
 Render: msg => msg ===' pending confirmation'?  < span style = {{color: "green"}} > {msg} </span >: (msg = = = "pending submission"?  < span style = {{color: "orange"}} > {msg} </span >: (msg = = = "pending approval"?  <span style={{color:"red"}}>{msg}</span>:<span>{msg}</span>)),
 Width: '10%',
 },{
 Title:' remarks',
 dataIndex: 'note',
 Width: '10%',
 },{
 Title:' operation',
 key: 'operation',
 render: (text, record) => (
 <span>
 <a>
 < popconfirm placement = "topleft" title = {"are you sure you want to close this declaration plan?"  bracket
 onVisibleChange={this.onPopVisibleChange}
 onConfirm={this.onPopConfirm(record)}
 onCancel={this.onTableFootBatchAppointExpertClickCancel}
 visible={this.props.commonTableReduce.get('popVisible')}>
 Close
 </Popconfirm>
 </a>
 <span className="ant-divider"></span>
 < a><span id="check "> view < /span></a >
 </span>),
 Width: '12%',
 bracket
 ];

The above is clumn quoted in Table. How do methods such as Popconfirm’s onVisibleChange in inside in the last column call the method below?

let AppTable = React.createClass({
 
 onPopConfirm(record){
 this.props.examineSubmittedTableAction.onPopConfirm(record,this.props.notificationAction,Notification)
 },
 onPopCancel(){
 this.props.examineSubmittedTableAction.onPopCancel()
 },
 onPopVisibleChange(){
 this.props.examineSubmittedTableAction.onPopVisibleChange()
 },

Then the code for Table

<Table
 //rowSelection={this.rowSelection}
 columns={columns}
 RowKey={record => record.id}// pay special attention to setting the name of the unique id of the table primary key to optimize react display.
 dataSource={commonTableReduce.get('data').toJSON()}
 pagination={false}
 loading={commonTableReduce.get('loading')}
 onChange={this.handleTableChangePrepare}
 onRowClick= {this.onRowClick}
 size="middle"
 ref="tableRef"

My website opened and found that this of clumn inside is undefined.
图片描述

How do I write it, or what’s the problem?

Put columns in the class.