62 lines
2.2 KiB
Markdown
62 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
name: jjb-interpolation-usage
|
|||
|
|
description: 定义 JJB Interpolation 高阶组件使用方式。在使用 Interpolation 包裹组件、insert、columns 方法时查阅。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 接口动态文本配置
|
|||
|
|
|
|||
|
|
## Interpolation 使用方式
|
|||
|
|
|
|||
|
|
- **导入方式**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **使用方式**：使用高阶组件（HOC）包裹页面组件
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
|
|||
|
|
function UserList(props) {
|
|||
|
|
const { interpolation, insert, columns } = props;
|
|||
|
|
|
|||
|
|
// 使用 insert 方法获取字段重命名文本
|
|||
|
|
const userNameLabel = insert('reslib-app-resourceManagement-userName') || '用户名';
|
|||
|
|
|
|||
|
|
// 使用 columns 方法处理表格列配置
|
|||
|
|
const tableColumns = columns([
|
|||
|
|
{ fieldCode: 'reslib-app-resourceManagement-userName', dataIndex: 'name', width: 200 },
|
|||
|
|
{ fieldCode: 'reslib-app-resourceManagement-email', dataIndex: 'email', width: 200 },
|
|||
|
|
{ dataIndex: 'phone', title: '手机号', width: 150 } // 没有 fieldCode 的列不受影响
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div>{userNameLabel}: 张三</div>
|
|||
|
|
<Table columns={tableColumns} dataSource={data} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用 Interpolation 包裹组件
|
|||
|
|
export default Interpolation(UserList);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **调试开关 `disabled`**：
|
|||
|
|
|
|||
|
|
Interpolation 第二个参数支持 `{ disabled?: boolean }` 配置，**默认值为 `false`**（动态文本正常启用）。
|
|||
|
|
|
|||
|
|
当需要临时关闭动态文本配置进行调试时，传入 `{ disabled: true }`，此时 `insert` 始终返回 `null`、`columns` 原样返回列配置，无需注释代码：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 正常启用动态文本配置（disabled 默认 false，可省略）
|
|||
|
|
export default Interpolation(UserList);
|
|||
|
|
|
|||
|
|
// 临时关闭动态文本配置（调试用），insert 返回 null，columns 原样返回
|
|||
|
|
export default Interpolation(UserList, { disabled: true });
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> ⚠️ **注意**：`disabled: true` 仅用于本地调试，调试完成后必须恢复为正常模式，**禁止将 `disabled: true` 提交到代码仓库**。
|