xhq-core/README.md

Compressed core module for xhq project

# xhq-core

一个用于将 JSON 配置转换为 React 组件的核心模块。

## 安装

```bash
npm install xhq-core
```

## 使用方法

### 基本用法

```jsx
import React from 'react';
import { RenderJson, registerComponent } from 'xhq-core';
import { Button, Form, Input } from 'antd-mobile';

// 注册组件
registerComponent({
  Button,
  Form,
  'Form.Item': Form.Item,
  Input,
});

// JSON 配置
const jsonConfig = {
  widget: 'Form',
  jProps: {
    layout: 'horizontal',
  },
  jChildren: [
    {
      widget: 'Input',
      jProps: {
        placeholder: '请输入姓名',
        formItemProps: {
          name: 'name',
          label: '姓名',
          rules: [{ required: true, message: '请输入姓名' }],
        },
      },
    },
    {
      widget: 'Button',
      jProps: {
        color: 'primary',
        jFunction: {
          onClick: "console.log('按钮被点击')",
        },
      },
      jChildren: '提交',
    },
  ],
};

function App() {
  return (
    <div>
      <RenderJson render={jsonConfig} />
    </div>
  );
}

export default App;
```

### 高级用法

```jsx
import { CustomRender, numToRem, addStyle, formatData } from 'xhq-core';

// 自定义渲染函数
const customComponent = CustomRender(jsonConfig, customState);

// 使用工具函数
const remValue = numToRem('r(32)'); // 转换为 rem 单位
addStyle('.custom-class { font-size: 16px; }'); // 动态添加样式
const formattedData = formatData(jsonConfig); // 格式化数据
```

## API

### RenderJson

主要的渲染组件，接收 `render` 属性作为 JSON 配置。

### CustomRender

自定义渲染函数，可以在任何地方使用。

### registerComponent

注册可用的组件库，必须在使用前调用。

### 工具函数

#### numToRem

将设计稿中的 `r()` 函数值转换为 rem 单位，支持响应式设计。

#### addStyle

动态添加 CSS 样式到页面中。

#### formatData

格式化 JSON 配置数据，处理样式单位转换等。

## 特性

- 🚀 高性能 JSON 到 React 组件转换
- 🎨 支持动态样式和响应式设计
- 🔧 支持自定义函数和事件处理
- 📱 支持表单验证和组件引用
- 🎯 支持组件隐藏和条件渲染

## 依赖

- React >= 16.8.0
- React DOM >= 16.8.0
- lodash
- use-deep-compare-effect

## 许可证

MIT

## 交流与支持

- **官网**：[`https://i-simple.fun/`](https://i-simple.fun/)
- **作者微信**：添加作者微信以获取交流与支持（扫码添加）

  ![作者微信二维码](https://i-simple.fun/service/file/name/wx.png)

- **关注作者**：欢迎在 B 站关注“火球码上来”，将定期分享教学视频与实战案例。

  [前往 B 站作者主页/搜索入口](https://search.bilibili.com/upuser?keyword=%E5%B0%8F%E7%81%AB%E7%90%83%E7%A0%81%E4%B8%8A%E6%9D%A5&from_source=webtop_search&spm_id_from=333.33&search_source=5)

## 商用授权声明

如将本项目用于商业用途，请先联系作者获取授权；未经授权的商用行为将依法维权。