xhq-core

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

安装

npm install xhq-core

使用方法

基本用法

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;

高级用法

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/

• 作者微信：添加作者微信以获取交流与支持（扫码添加）

  

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

  前往 B 站作者主页/搜索入口

商用授权声明

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