低代码大数据可视化页面前端方案
主要技术react 16.x, umi 3.x, css3 grid布局, echarts 5.1,monaco-editor,antd实现思路react component=fn(props), 使用react hooks 组件+props 渲染整个页面, 通过一个对象 保存所有组件的 状态 , 对象的 key 是组件在整个组件树中的唯一key(id) , 对象的 value是组件的props使
·
主要技术
- react 16.x, umi 3.x, css3 grid布局, echarts 5.1,monaco-editor,antd 4.x等
实现思路
- react component=fn(props), 使用hooks 组件+配置的props 构成页面 组件树, 通过一个对象 保存所有组件的 状态 , 对象的 key 是组件在整个组件树中的唯一key(id) , 对象的 value是组件的props
- 使用 css-grid 栅格布局 实现页面布局自适应.
- 使用monaco-editor 编辑
低代码, 使用 new Function(sentence) 在组件渲染或事件回调时执行低代码改变组件props - 组件初始化时 将默认props 全部返回到
低代码中 方便查看. - antd相关组件用于编辑阶段. 不用于生成dom中(不适合可视化展示).
- 暴露echarts,React到全局变量window中方便低代码使用
- 使用 React.createElement 插入自定义组件
存在的问题
- 性能优化 (如果开发的组件过多可能导致页面加载缓慢,可以使用各种方案优化)
- 在低代码中无法直接使用jsx 语法
这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容，并连接云服务、办公空间等稀缺资源，助你专注创造，无忧运营。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)