@careteam/mfe-lowcode-render

低代码渲染 sdk

开发

npm install 
npm run dev

使用方法

• 渲染sdk的使用

import React from 'react';
import { Reset ,Render } from '@careteam/mfe-lowcode-render';
import schema from './schema.json';
export default () => (
  <div style={{ margin: '20px', width: '800px' }}>
    {/* 通过 id 获取配置并渲染 */}
    <Render
      labelWidth={80}
      onSubmit={console.log}
      id="10"
      appKey="xxx"
      appSecret="xxxx"
      env="prod"
      onChange={console.log}
    >
      <Reset/>
    </Render>
    {/* 通过schema直接渲染 */}
    <Render
      labelWidth={80}
      onSubmit={console.log}
      schema={schema}
      onChange={console.log}
    >
      <Reset/>
    </Render>
  </div>
);

• 编辑器的使用

import React from 'react';
import Editor from '@careteam/mfe-lowcode-render/lib/editor';
import schema from './schema.json';
export default () => (
  <>
    <Editor value={schema} onChange={(v) => {
      console.log(v);
    }}/>
  </>
)

render props

export interface IFormProps {
  id?: string                                       // 通过唯一标识渲染组件时，组件名称
  appKey?: string                                   // appkey
  appSecret?: string                                // appsecret
  env?:string                                       // 环境[ pro, test ]
  onChange?: (values: any, actions: any) => void    // 表单value change事件
  onSubmit?: (values: any, actions: any) => void    // submit事件
  onReset?: Function                                // 重置事件  
  onMessage?: Function                              // 废弃
  schema?: any,                                     // 通过传入schema直接渲染
  components?: object,                              // 传入自定义component配置
  value?: object,                                   // 表单value  
  formComponent?: React.FunctionComponent,          //   
  formItemComponent?: React.FunctionComponent       //
  children?:React.ReactElement                      //
  mode?:string                                      // mode，仅在编辑器中用到 [default , edit]
  effects?:any   // effect 参考https://formilyjs.org/#/0yTeT0/aAIRIjiou6，用于表单联动
  serverUrl?:string                                 // 通过唯一标识渲染，指定的服务接口
}
// 其他配置，参考 https://formilyjs.org/#/bdCRC5/dzUZU8il