请教使用低开方式制作自定义组件的思路

[w4ngzhen]

各位大佬，请问如何在低开引擎上，使用低代码方式开发自定义组件呢？ 鄙人目前没有想通的是，低开制作的自定义组件的数据如何管理。比如，我想低开拖拉拽只做一个包含输入框和表格的组件。 输入框输入后，请求后端拿到数据，并填充表格，并且会向外发送一个叫onDataLoaded事件供使用者获取。有什么好的思路吗？

[LeoYuan]

@eternalsky showtime~

[eternalsky]

这块一两句也讲不清楚，6月初我会在 GMTC 北京做关于这块的专题分享，到时候可以关注一下~ 会分享我们这边这块的一些实战分享。也可以在这个 issue 里回复一些比较关心的问题，我到时候看可以整合到分享内容中~

[w4ngzhen]

这块我这几天仔细思考了下，目前只是想到了一个方案。 就是在editor上拖拉拽出来的组件的schema是能够解析所使用的所有原子组件以及结构，那么通过这个结构可以生成（应该和engine中的render机制类似，但是这里是生成代码）：

React.createElement('原子组件' {schema中定义的props}, [子元素])

例如，我拖一个Next卡片，卡片里面有一个Next按钮，那么我直接生成：

class MyCustomComp extend React.Component {

  constructor(props) {
    this.props = props;
  }

  render() {
    const buttonComp = React.createElement(Next.Button, {...schemaButtonProps});
        const cardComp = React.createElement(Next.Card, {...schemaCardProps}, [buttonComp]);
  }
}

同样的，我们可以给按钮配置点击事件，但是绑定的实际是MyCustomComp里面的方法，本质上是生成：

class MyCustomComp extend React.Component {

  constructor(props) {
    this.props = props;
  }

+  onClick() { // 这块由用户编写，插入类片段
+  this.setState({
+    message: 'hello'
+  })
+ }

  render() {
+    const innerOnClick = (e) => { this.onClick() }; // 代码进行绑定
-    const buttonComp = React.createElement(Next.Button, {...schemaProps});
+    const buttonComp = React.createElement(Next.Button, {...schemeProps, onClick: innerOnClick});
        const cardComp = React.createElement(Next.Card, {...schemaCardProps}, [buttonComp]);
  }
}

通过UI，我可以配置这个自定义组件的属性props有哪些，分别是什么类型。这块可以用来生成对应组件的Meta.js。此外，内部组件绑定props里面的值。而这个类是可以直接加载到window上下文的，也可以单独生成js。

算是通过可视化写了个组件吧哈哈。

[w4ngzhen]

另外，关于组件物料开发那块，我感觉可以不用在@alifd/build-plugin-lowcode里面生成项目，感觉可以直接想engine-core开发一样，发布到localhost:3333/js/view.js，然后让lowcode-demo里面加载本地的组件物料来进行调试。因为目前发现有两个问题，一个就是为了生成.tmp目录以及里面的内容，需要处理windows的场景；二是@alifd/build-plugin-lowcode里面的html模板以及view、preview等js模板很容易过时，造成组件开发和实际的环境不一致的问题。所以，索性不如组件开发，暴露到某个url，然后让lowcode-demo去加载更加好。 @LeoYuan

[github-actions[bot]]

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.

[dzlhk]

这块一两句也讲不清楚，6月初我会在 GMTC 北京做关于这块的专题分享，到时候可以关注一下~ 会分享我们这边这块的一些实战分享。也可以在这个 issue 里回复一些比较关心的问题，我到时候看可以整合到分享内容中~

会议由录屏么？我刚看到，貌似错过了

[eternalsky]

GMTC 延期到 8月中旬了，录屏按照历届来看应该没有，但会有 PPT 提供下载。

[dzlhk]

GMTC 延期到 8月中旬了，录屏按照历届来看应该没有，但会有 PPT 提供下载。

奥 好的！那有没有文档可以参考呢，目前我遇到的问题是，可以使用 组件源码生成组件，大部分为业务组件（Business Component），没有生命周期等 想尝试创建。低代码业务组件（Low-Code Business Component）， 以及想实现拖拽区块（Block）到编辑器中（有完整的事件、生命周期管理、状态管理、数据流转机制等）可以与本来页面已经存在的schema 进行合并，比如 函数和状态管理，可以直接加入到本来的页面容器中

查看了大部分，文档，暂未发现这块实现的参考方式。 这里可以请教下，有哪些有意义的参考文档或者项目么？谢谢🙏

[dzlhk]

GMTC 延期到 8月中旬了，录屏按照历届来看应该没有，但会有 PPT 提供下载。 这个会议开了么

[LeoYuan]

GMTC 延期到 8月中旬了，录屏按照历届来看应该没有，但会有 PPT 提供下载。

这个会议开了么

9.15 北京，不见不散😃