当我们在使用React构建表格数据时,很多情况下需要对表格数据进行筛选、排序、分页等操作,这些操作对于表格组件的开发工作会带来较大的复杂度,同时也会使得表格组件的复用性较差。而React提供的Hook机制可帮助开发者更方便地组织组件逻辑,因此,我们可以利用React的Hook机制来封装一个公共的表格数据处理Hook。
- Hook函数的结构
我们可以将表格数据的处理逻辑封装至一个自定义Hook中,该Hook可被其他表格组件复用。在该Hook中,我们需要定义数据查询条件、表格数据和表格操作等状态,并通过Hook的形式暴露这些状态和函数供其他组件使用。
import { useState, useEffect } from 'react';
const useTableData = (defaultParams) => {
const [params, setParams] = useState(defaultParams); // 查询条件
const [data, setData] = useState([]); // 表格数据
const [total, setTotal] = useState(0); // 总数
const [loading, setLoading] = useState(false); // 加载状态
const fetchData = async () => {
setLoading(true);
const res = await fetch('/api/tableData', { method: 'POST', body: JSON.stringify(params) });
const { data, total } = await res.json();
setLoading(false);
setData(data);
setTotal(total);
};
useEffect(() => {
fetchData();
}, [params]);
return {
params,
setParams,
data,
total,
loading
};
};
export default useTableData;
在封装完一个表格数据处理Hook之后,我们可以在不同的表格组件中通过调用该Hook来使用这些查询、筛选和分页等操作。下面提供两个示例:
- 示例1:简单表格组件
import React from 'react';
import useTableData from './useTableData';
const SimpleTable = () => {
const { data, loading } = useTableData({ page: 1, size: 10 });
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.column1}</td>
<td>{item.column2}</td>
<td>{item.column3}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default SimpleTable;
该示例中的SimpleTable组件仅需要用到查询条件和表格数据,因此我们可以通过调用useTableData Hook来获取相关状态,然后在页面上渲染表格数据即可。
- 示例2:实现带分页的表格组件
import React from 'react';
import useTableData from './useTableData';
const PageTable = () => {
const { params, setParams, data, total, loading } = useTableData({ page: 1, size: 10 });
const onPageChange = (page) => {
setParams({ ...params, page });
};
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.column1}</td>
<td>{item.column2}</td>
<td>{item.column3}</td>
</tr>
))}
</tbody>
</table>
<div>
<button disabled={params.page === 1} onClick={() => onPageChange(params.page - 1)}>Prev</button>
<span>{params.page} / {Math.ceil(total / params.size)}</span>
<button disabled={params.page === Math.ceil(total / params.size)} onClick={() => onPageChange(params.page + 1)}>Next</button>
</div>
</div>
);
};
export default PageTable;
该示例中的PageTable组件需要用到查询条件、表格数据和分页操作,因此我们可以通过调用useTableData Hook来获取相关状态和分页操作函数,然后在页面上渲染表格数据和分页操作组件。每次分页操作时,我们可以通过setParams()函数来更新查询条件的page参数,并重新获取表格数据。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:公共Hooks封装useTableData表格数据实例 - Python技术站