大佬教程收集整理的这篇文章主要介绍了在 React 类组件中声明的导出函数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我试图导出一个在 react 类组件中声明的函数，以便在另一个文件中使用它，但该函数使用了该类的 props。
这是我想导出函数 handledeleteAction() 的示例
import React,{ Component } from 'react';
import { connect } from 'react-redux';
import swal from "sweetalert";
import { delete_user } from '../Actions';
class UserContainer extends Component {
constructor(props) {
super(props);
}
handledeleteAction = async (event,{ ID,username }) => { // i want to export this function
await this.props.delete_user(ID); //this is an action
};
renderDatatable = () => {
const { loading,data,pagination } = this.state;
return (
<Datatable
ID="trace"
data={data ? data[0] : null}
@R_394_10586@lRows={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' />
);
}
export default connect(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 >
);
}
}
];
您不能导出该函数。每当构造函数 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}
@R_394_10586@lRows={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' />
);
}
}
然而，这并不意味着您可以访问传递给由 UserContainer 类实例化的任何对象的道具。导出的函数需要绑定到一个组件，该组件可以访问通过该 prop 传递的值。就像我们在 UserContainer 类中所做的一样。
以上是大佬教程为你收集整理的在 React 类组件中声明的导出函数全部内容，希望文章能够帮你解决在 React 类组件中声明的导出函数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。