Closed yondmn closed 1 year ago
依次执行
npm init @alilc/element lowcode-material-demo
yarn install
yarn lowcode:dev
src/index.ts
import * as React from 'react'; import { forwardRef, ForwardRefRenderFunction } from 'react'; interface ComponentProps { title: string; content: string; hhhh: string; } const ExampleComponent = (props: ComponentProps, ref: any) => { const { title, content, ...others } = props; return ( <div ref={ref} className="ExampleComponent" {...others}> <h1>{title}</h1> <p>test test</p> <p>{others.hhhh}</p> {content || 'Hello ExampleComponent'} </div> ); }; const RefExampleComponent = forwardRef(ExampleComponent as ForwardRefRenderFunction<any, ComponentProps>); RefExampleComponent.displayName = 'ExampleComponent'; export default RefExampleComponent;
meta.ts
import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; const LowcodeMaterialDemoMeta: ComponentMetadata = { "componentName": "LowcodeMaterialDemo", "title": "LowcodeMaterialDemo", "docUrl": "", "screenshot": "", "devMode": "proCode", "npm": { "package": "lowcode-material-demo", "version": "0.1.0", "exportName": "default", "main": "src/index.tsx", "destructuring": false, "subName": "" }, "configure": { "props": [ { "title": { "label": { "type": "i18n", "en-US": "title", "zh-CN": "title" } }, "name": "title", "setter": { "componentName": "StringSetter", "isRequired": true, "initialValue": "" } }, { "title": { "label": { "type": "i18n", "en-US": "content", "zh-CN": "content" } }, "name": "content", "setter": { "componentName": "StringSetter", "isRequired": true, "initialValue": "" } }, { "title": { "label": { "type": "i18n", "en-US": "hhhh", "zh-CN": "hhhh" } }, "name": "hhhh", "setter": { "componentName": "StringSetter", "isRequired": true, "initialValue": "" } }, { "title": { "label": { "type": "i18n", "en-US": "cbb", "zh-CN": "cbb" } }, "name": "cbb", "setter": { "componentName": "StringSetter", "isRequired": true, "initialValue": "" } }, { "title": { "label": { "type": "i18n", "en-US": "ref", "zh-CN": "ref" } }, "name": "ref", "setter": { "componentName": "MixedSetter", "props": { "setters": [ { "componentName": "FunctionSetter" }, { "componentName": "ObjectSetter", "props": { "config": { "extraSetter": { "componentName": "MixedSetter", "isRequired": false, "props": {} } } }, "isRequired": false, "initialValue": {} } ] } } }, { "title": { "label": { "type": "i18n", "en-US": "key", "zh-CN": "key" } }, "name": "key", "setter": { "componentName": "MixedSetter", "props": { "setters": [ { "componentName": "StringSetter", "isRequired": false, "initialValue": "" }, { "componentName": "NumberSetter", "isRequired": false, "initialValue": 0 } ] } } } ], "supports": { "style": true }, "component": {} } }; const snippets: Snippet[] = [ { "title": "LowcodeMaterialDemo", "screenshot": "", "schema": { "componentName": "LowcodeMaterialDemo", "props": {} } } ]; export default { ...LowcodeMaterialDemoMeta, snippets };
meta.ts 中的内容是因为没有自动更新,然后手动修改的
组件开发问题 可以提到 https://github.com/ice-lab/icepkg
依次执行
npm init @alilc/element lowcode-material-demo
创建 React-单组件 物料项目yarn install
yarn lowcode:dev
src/index.ts
meta.ts
meta.ts 中的内容是因为没有自动更新,然后手动修改的