-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
组件注册与画布渲染 #464
Comments
/***
由于组件树结构需要序列化入库,所以必须为一个可以序列化的 JSON 结构,
而这个结构又需要暴露给开发者,所以也不适合定义一些 hack 的序列化、
反序列化规则。因此要给组件 props 注入函数,需要定义在组件元信息上,
由于其定义了额外的 props 属性,且不在组件树中,所以我们将其命名为 runtimeProps:
**/
const divMeta = {
componentName: "div",
runtimeProps: () => ({
onClick: () => { console.log('click') }
})
element: ({ onClick }) => (
<button onClick={onClick}>
点击我
</button>
),
};
// 点击按钮后,会打印出 click。这是因为 runtimeProps 定义了函数类型 onClick 在运行时传入了组件 props。 不知道我理解的对不对,这样设计就可以让element函数对接任意组件库,runtimeProps其实就可以是任意组件自身的props |
@yanghuanrong 是的,因为元信息不入库,可以写函数。后面还会说到拓展出 selector 语法,使 runtimeProps 可以根据全局状态驱动,或者组件 props 的变化而驱动,生成一些新的函数注入到组件 props。 |
那这样的话,组件与组件之间应该就可以互相通信,根据不同的数据状态去做不同的渲染。非常期待下一章节。 |
非常受益,目前正在针对业务开发低代码产品。我很好奇,博主怎么获取低代码相关知识的? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
上一章我们讨论了如何抽象可视化搭建,这次我们讨论更实际的内容:组件如何注册、画布结构与渲染。
组件注册与画布渲染
The text was updated successfully, but these errors were encountered: