react+antd,table组件如何使用函数

新手上路,请多包涵

用的ui框架为antd,使用的组件为table,用了typescript和react-redux

请问如何在mapStateToProps中使用mapDispatchToProps里的函数
如下图
因为需要用columns中的数据渲染table组件,所以数据放在mapStateToProps中,在Cart组件里通过this.props来使用。

问题1.png

import { stateType } from "./store/index"
import Bread from './component/bread'
import { Table, Button } from 'antd';


interface Iprops {
    data: aGoods_list[],
    columns: object[]
}

class Cart extends Component<Iprops> {
    render() {
        const { data, columns} = this.props
        return (
            <div>
                {/* 导航 */}
                <Bread title="购物车" />

                {/* 购物车 */}
                {
                    data.length === 0
                        ?
                        <div>购物车里什么也没有哦</div>
                        :
                            <Table 
                            columns={columns} 
                            dataSource={data} 
                            rowKey={(item, index) => String(index)}
                            pagination={false}
                            bordered={true}
                             />
               
                }

            </div>

        )
    }
}

const mapStateToProps = (state: stateType) => {

    return {
        data: state.listReducer,
        columns: [
            {
                title: '操作',
                dataIndex: 'id',
                align: 'center' ,
                render: (id: number) => <Button type="danger" onClick={() => { }}>删除</Button>
            }
        ]
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        fnDelete(){
            console.log("呵呵呵");
            
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Cart);
阅读 4.9k
1 个回答

在props里面可以获取这个函数:

const { fnDelete } = this.props

然后就可以调用了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题