trionesdev / triones-designable

designable 修复版, 支持antd v5
https://trionesdev.github.io/triones-designable/
30 stars 14 forks source link

你好 请问我按照示例做了页面 在拖拽时报错error:Cannot read properties of null (reading 'createField') 是缺少了什么依赖吗 #9

Closed osCaiwei closed 3 months ago

osCaiwei commented 3 months ago

我按照示例做了页面 在拖拽时报错error:Cannot read properties of null (reading 'createField') 是缺少了什么依赖吗

osCaiwei commented 3 months ago

import { createDesigner, GlobalRegistry, KeyCode, Shortcut, } from '@trionesdev/designable-core'; import { useEffect, useMemo } from 'react'; // import './App.css'; import { ComponentTreeWidget, CompositePanel, Designer, DesignerToolsWidget, HistoryWidget, IDesignerComponents, OutlineTreeWidget, ResourceWidget, SettingsPanel, StudioPanel, ToolbarPanel, ViewPanel, ViewportPanel, ViewToolsWidget, Workspace, WorkspacePanel, } from '@trionesdev/designable-react'; import { ArrayCards, ArrayTable, Field, Form, Input, NumberPicker, Password, Rate, } from '@trionesdev/designable-formily-antd'; import { SettingsForm } from '@trionesdev/designable-react-settings-form'; import { transformToSchema } from '@trionesdev/designable-formily-transformer'; import { Button } from 'antd'; import { PreviewWidget } from './PreviewWidget';

function FormDesignable() { const engine = useMemo( () => createDesigner({ shortcuts: [ new Shortcut({ codes: [ [KeyCode.Meta, KeyCode.S], [KeyCode.Control, KeyCode.S], ], handler(ctx) { console.log( JSON.stringify(transformToSchema(engine.getCurrentTree())), ); }, }), ], rootComponentName: 'Form', }), [], );

const handleSave = () => { console.log(JSON.stringify(transformToSchema(engine.getCurrentTree()))); };

useEffect(() => { GlobalRegistry.setDesignerLanguage('zh-cn'); }, []);

const components: IDesignerComponents = { Form, Field, Input, Rate, NumberPicker, Password, ArrayCards, ArrayTable, };

return ( <div style={{ width: '100%', height: '100%' }}>

保存]}> {/**/} {() => ( )} {/* {(tree) => { console.log(tree) debugger return < PreviewWidget tree={tree} components={components} /> }} */}
</div>

); }

export default FormDesignable;

osCaiwei commented 3 months ago

上面是code