Javascript 在React类组件内声明的导出函数

我试图导出在react类组件中声明的函数，以便在另一个文件中使用它，但该函数使用该类的道具

这是一个我想导出函数handleDeleteAction（）的示例

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“sweetalert”导入swal；
从“../Actions”导入{delete_user}；
类UserContainer扩展组件{
建造师（道具）{
超级（道具）；
}
handleDeleteAction=async（事件，{id，username}）=>{//我想导出此函数
等待这个.props.delete_user（id）；//这是一个操作
};
renderDataTable=（）=>{
const{loading，data，pagination}=this.state；
返回(
);
};
render（）{
返回(
);
}
导出默认连接（null，{loadUsersData，delete_user}）（UserContainer）；

并且需要在此文件中调用该函数，当用户单击按钮时会触发该函数：

import { Tag, Button, Space } from 'antd';
import { AiFillDelete } from "react-icons/ai";
import { BsPencil } from "react-icons/bs";
import {handleDeleteAction} from '../user/UserContainer'
export const USER_COLUMNS = [
  
    {
        title: "Action", dataIndex: "id", key: "id", align: 'center', render: (text, record, index) => {
            // console.log("text", text);
            // console.log("record", record);
            // console.log("index", index);
            return (
                <Space size={'small'} >

                    <Button type="primary" icon={<AiFillDelete />} id={record.id} onClick={(e) => handleDeleteAction(e, record)} size='large' danger />

                </Space >
            );
        }
    }

];

从“antd”导入{Tag，Button，Space}；
从“反应图标/ai”导入{AiFillDelete}；
从“反应图标/B”导入{BsPencil}；
从“../user/UserContainer”导入{handleDeleteAction}
导出常量用户\u列=[
{
标题：“操作”，数据索引：“id”，键：“id”，对齐：“中心”，呈现：（文本，记录，索引）=>{
//控制台日志（“文本”，文本）；
//控制台日志（“记录”，记录）；
//控制台日志（“索引”，索引）；
返回(
handleDeleteAction（e，记录）}size='large'危险/>
);
}
}
];

您无法导出该函数。每当构造函数

UserContainer

创建一个对象时，就会创建该函数，并且该函数是所创建对象的本地函数。您可以在类之外创建函数，甚至可以将其作为可导出的类的方法

export async function handleDeleteAction(event, { id, username }){
    return this.props.delete_user(id);
};

class UserContainer extends Component {
    constructor(props) {
        super(props);
    }
        
    handleDeleteAction = handleDeleteAction.bind(this);

    renderDataTable = () => {

        const { loading, data, pagination } = this.state;
        return (
            <DataTable
                id="trace"
                data={data ? data[0] : null}
                totalRows={data ? data[1] : null}
                columns={USER_COLUMNS} //the function is called inside the const USER_COLUMN
                loading={loading}
                
            />
        );
    };

    render() {

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

导出异步函数handleDeleteAction（事件，{id，username}）{
返回此.props.delete_用户（id）；
};
类UserContainer扩展组件{
建造师（道具）{
超级（道具）；
}
handleDeleteAction=handleDeleteAction.bind（此）；
renderDataTable=（）=>{
const{loading，data，pagination}=this.state；
返回(
);
};
render（）{
返回(
);
}
}

---

但是，这并不意味着您可以访问传递给

UserContainer

类实例化的任何对象的道具。导出的函数需要绑定到一个组件，该组件可以访问通过该属性传递的值。就像我们在

UserContainer

课程中所做的那样。

我明白了，非常感谢你的回答，我真正的问题是如何传递这些道具。因此，解决方案是将我的常量放在类UserContainer中，问题就解决了。您将

CONST

？直接放在renderDataTable（）中的什么位置

export async function handleDeleteAction(event, { id, username }){
    return this.props.delete_user(id);
};

class UserContainer extends Component {
    constructor(props) {
        super(props);
    }
        
    handleDeleteAction = handleDeleteAction.bind(this);

    renderDataTable = () => {

        const { loading, data, pagination } = this.state;
        return (
            <DataTable
                id="trace"
                data={data ? data[0] : null}
                totalRows={data ? data[1] : null}
                columns={USER_COLUMNS} //the function is called inside the const USER_COLUMN
                loading={loading}
                
            />
        );
    };

    render() {

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