React 组件js文件中如何引入其他的js 文件数组

在编写react 组件,特别是表格的过程中,我个人是最看不得,整个js文件感觉很多的内容,而且数组,函数,html代码都有,整体看起来分邋遢,我使用的是antd的Table 来渲染表格

React 组件js文件中如何引入其他的js 文件数组

 我们看这样的一串表头 用户 名称,手机号码,邮箱,角色,备注,在渲染的时候,是用数组来进行渲染的,那么这段数组,在组件的文件中肯定也是占用很长的一部分

React 组件js文件中如何引入其他的js 文件数组

 那我们肯定要试着将这段数组抽离出来,放到其他的文件中,然后在组件的js 文件中将这段数组引入,作为一个对象给 Table 的column的组件进行赋值,

首先我们创建一个js 文件,因为我们是用户的列表,,这个文件就叫做 userColumn.js

 const userColumn=[
	{
		title: '用户名称',
		dataIndex: 'configname',
		key: 'username',
	},
	{
		title: '手机号码',
		dataIndex: 'configvalue',
		key: 'phone',
	},
	{
		title: '电子邮箱',
		dataIndex: 'remark',
		key: 'email',
	},
	{
		title: '用户角色',
		dataIndex: 'remark',
		key: 'userrole',
	},
	{
		title: '备注',
		dataIndex: 'remark',
		key: 'remark',
	}
]

export default userColumn;

创建完成之后 ,我们在页面的组件中引入:

React 组件js文件中如何引入其他的js 文件数组

 引入过来是一个对象,我们把这个userColumn 这个对象的值给Table的column 属性:

React 组件js文件中如何引入其他的js 文件数组

 React 组件js文件中如何引入其他的js 文件数组

 其实我们就是把这个数组抽离出去了,让整个文件看起来更加的简洁

接触react时间不长,因为编程的习惯,希望整个代码更加的简洁,所以才会有上面的想法,并且尝试这个去实现,或许这样能帮助我们更好的学习React吧

希望对你有所帮助,也欢迎来吐槽!

上一篇:ant-design-vue中table自定义列


下一篇:Vue3学习(十一)之 table表格组件的使用