baidu-amis用react实现了此功能:
https://baidu.github.io/amis/#/docs/sdk
工作原理:
amis 的渲染过程就是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component 然后,然后把其他属性作为 props 传递过去完成渲染。
拿一个表单页面来说,如果用React组件调用大概是这样:
<Page
title="页面标题"
subTitle="副标题"
>
<Form
title="用户登录"
controls={[
{
type: 'text',
name: 'username',
label: '用户名'
}
]}
/>
</Page>
把以上配置方式换成 amis JSON, 则是:
{
"type": "page",
"title": "页面标题",
"subTitle": "副标题",
"body": {
"type": "form",
"title": "用户登录",
"controls": [
{
"type": "text",
"name": "username",
"label": "用户名"
}
]
}
}
将json转成组件的原理:是根据path信息(正则匹配)找到对应组件完成渲染的。
path由json拼凑成,如上面text的path为:page/body/form/controls/0/text。