---
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` 提交到代码仓库**。