将protable封装为公共组件时如何解决columns的valueenum的值不更新
时间: 2024-02-21 08:01:39 浏览: 35
在使用 Protable 组件时,我们可以使用 `valueEnum` 参数来指定表格中某一列的枚举值,从而将该列的文本值替换为相应的枚举值。例如:
```jsx
<ProTable
columns={[
{
title: '状态',
dataIndex: 'status',
valueEnum: {
0: { text: '待审核', status: 'Processing' },
1: { text: '已通过', status: 'Success' },
2: { text: '已拒绝', status: 'Error' },
},
},
// ...
]}
// ...
/>
```
但是,在封装 Protable 组件为公共组件时,如果 `valueEnum` 的值不更新,可能会导致表格中显示的文本值与实际的枚举值不一致。
要解决这个问题,我们可以将 `valueEnum` 的值作为组件的属性传入,然后在组件内部使用 `React.useMemo()` 来缓存该值。这样,当属性值变化时,`useMemo()` 会重新计算缓存的值,从而保证表格中的枚举值始终与实际的枚举值一致。
具体地,我们可以这样实现:
```jsx
import React from 'react';
import ProTable from '@ant-design/pro-table';
function MyTable({ columns, valueEnums, ...restProps }) {
const memoizedColumns = React.useMemo(
() =>
columns.map((column) => {
if (column.valueEnum) {
return {
...column,
valueEnum: valueEnums[column.dataIndex],
};
}
return column;
}),
[columns, valueEnums]
);
return <ProTable columns={memoizedColumns} {...restProps} />;
}
```
上述代码中,我们将 `valueEnums` 作为组件的属性传入,并在 `useMemo()` 中根据 `valueEnums` 来更新 `columns` 中每一列的 `valueEnum` 值。这样,当 `valueEnums` 属性变化时,`useMemo()` 会重新计算缓存的值,从而更新表格中的枚举值。
使用时,我们可以这样调用:
```jsx
<MyTable
columns={[
{
title: '状态',
dataIndex: 'status',
valueEnum: {
0: { text: '待审核', status: 'Processing' },
1: { text: '已通过', status: 'Success' },
2: { text: '已拒绝', status: 'Error' },
},
},
// ...
]}
valueEnums={{
status: {
0: { text: '待审核', status: 'Processing' },
1: { text: '已通过', status: 'Success' },
2: { text: '已拒绝', status: 'Error' },
},
}}
// ...
/>
```
上述代码中,我们将 `valueEnums` 属性传入组件,并在其中为 `status` 列指定了枚举值,这样就可以确保表格中的枚举值始终与实际的枚举值一致。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)