# DataSourceShow 数据展示组件

DataSourceShow 是一系列基于数据容器的展示型组件集合,用于展示数据容器中的变量内容。这些组件可以自动订阅数据容器中的变量变化,并实时更新显示内容。

## 特性

- 自动订阅数据容器变量变化
- 支持变量解析和展示
- 提供多种展示形式(Typography等)
- 支持自定义展示组件

## 核心组件

### withParseVariables HOC

`withParseVariables` 是一个高阶组件,为展示组件提供变量解析和订阅能力:

```typescript
const withParseVariables = <P extends ParsedProps>(
Component: React.ComponentType<P>,
keys: string[]
) => Component
```


#### 参数

- `Component`: 需要包装的展示组件
- `keys`: 需要解析的属性名数组

#### 功能

- 自动解析组件 props 中的变量表达式
- 订阅数据容器中的变量变化
- 当变量更新时重新渲染组件

## 使用示例

```tsx
import { withParseVariables } from './utils';
import { Typography } from 'antd';
// 创建一个支持变量解析的Typography.Text组件
const VariableText = withParseVariables(Typography.Text, ['children']);
// 使用组件
<VariableText children="{{user.name}}" />
```

## 注意事项

1. 被包装的组件props中如果包含变量表达式,必须在keys数组中声明对应的属性名
2. 变量表达式支持两种格式:
   - 字符串形式: "{{variable}}"
   - 数组形式: ["{{variable}}"]
3. 组件会自动订阅数据容器中的变量,在组件卸载时会自动取消订阅

## 扩展开发

如需开发新的展示组件,只需要:

1. 创建新的展示组件
2. 使用 withParseVariables 包装组件
3. 声明需要解析的属性名

```tsx
const YourComponent = (props) => {
// 你的组件逻辑
};
export default withParseVariables(YourComponent, ['propName1', 'propName2']);
```
