如何导出React类组件中依赖类props的函数以在其他文件中调用

你现在的核心问题是：handleDeleteAction 是UserContainer类的实例方法，绑定了类实例的this，依赖实例上的props，无法直接导出给外部文件使用。推荐你通过「把列配置改造为可接收回调参数的函数」实现，改动最小也符合React数据流规范：

步骤1：修改列配置文件 #

把原来静态的USER_COLUMNS数组改为接收删除回调作为参数的函数，删除原来对handleDeleteAction的导入：

import { Tag, Button, Space } from 'antd';
import { AiFillDelete } from "react-icons/ai";
import { BsPencil } from "react-icons/bs";
// 删掉原来导入handleDeleteAction的代码

// 改为函数，接收删除回调参数
export const USER_COLUMNS = (handleDeleteAction) => [
    {
        title: "Action", dataIndex: "id", key: "id", align: 'center', render: (text, record, index) => {
            return (
                <Space size={'small'} >
                    <Button 
                        type="primary" 
                        icon={<AiFillDelete />} 
                        id={record.id} 
                        onClick={(e) => handleDeleteAction(e, record)} 
                        size='large' 
                        danger 
                    />
                </Space >
            );
        }
    }
];

步骤2：修改UserContainer组件 #

在渲染表格传入列配置时，把当前实例的handleDeleteAction传给USER_COLUMNS函数即可：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import swal from "sweetalert";
import { delete_user } from '../Actions';
// 导入改造成函数的USER_COLUMNS，替换为你实际的列配置文件路径
import { USER_COLUMNS } from './columns文件路径';

class UserContainer extends Component {
    constructor(props) {
        super(props);
    }

    handleDeleteAction = async (event, { id, username }) => {
        await this.props.delete_user(id);        
    };

    renderDataTable = () => {
        const { loading, data, pagination } = this.state;
        return (
            <DataTable
                id="trace"
                data={data ? data[0] : null}
                totalRows={data ? data[1] : null}
                // 传入当前实例的删除方法生成列配置
                columns={USER_COLUMNS(this.handleDeleteAction)}
                loading={loading}
            />
        );
    };

    render() {
        return (
            <LayoutContainer renderDataTable={this.renderDataTable} title='Gestion des utilisateurs' />
        );
    }
}

export default connect(null, { loadUsersData, delete_user })(UserContainer);

其他可选方案 #

如果不想改动列配置的结构，也可以把删除逻辑抽离成独立的Redux操作函数，直接在列配置文件中引入store手动dispatch，不过这种方案会让列配置和Redux强耦合，更推荐上面的回调方案。

内容的提问来源于stack exchange，提问作者Salah ED