如何将事件和触发的函数当作参数传递，可以使用jsx语法

Question

page1

columns = [{
    title: '操作', dataIndex: 'action',
    fixed: 'right',
    width: 76,
    render: [
        { title: '编辑', icon: 'edit', span: 12, onClick: 'this.showEdit.bind(this, record)', },
        { title: '删除', icon: 'delete', span: 12, onClick: 'this.delectItem.bind(this, record)', },
    ],
},,,,]

---

page2

handleColumns = (columns) => {
    columns.forEach((item, index) => {
        if (item.dataIndex == 'action') {
            item['render'] = (text, record) => (
                <Row type="flex" justify="space-between" align="middle" gutter={8} style={{ width: item.width }}>
                    {item.other.map((item, index) => {
                        return <Col key={index} span={item.span}><Tooltip title={item.title}><Button shape="circle" icon={item.icon} /></Tooltip></Col>
                    })}
                </Row>
            )
        }
    })
    return columns
}

<Table
    columns={handleColumns(columns)}
/>

---

如果换成jsx语法，因为不在一个页面，函数会在page1执行，因为this指向的是page1

Answer 1

onClick={() => eval(`self.${item.click}(record)`)}

---

用这种方式解决了问题

Answer 2

你数据里属性值不能直接写成函数么

Answer 3

不要用 bind 或箭头函数不就好了。onClick = {this.showEdit}

还有，你最上面 page1里的，onClick: 'this.showEdit.bind(this, record)' 是错的，首先onclick 的值是个字符串，根本不是方法，其次，bind 用法也错误。