20 分钟把 amis 接入 React 项目用 JSON 配置生成后台页面【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis产品让你加一个用户列表 筛选 编辑弹窗的后台页面你本来要手写 JSX 再串联状态。而开源低代码框架 amis 能用一份 JSON 配置直接生成整页并且可以嵌进现有 React 项目不改技术栈。先判断值不值得用3 类场景别硬上❌ 不建议交互高度定制的页面拖拽、画布、复杂动画内置渲染器只覆盖后台常见场景硬套反而费事要求极致首屏性能或精确控制包体积的场景低代码渲染多一层开销团队完全不会 Reactschema 是 JSON但自定义组件、编辑器插件终究要 React 功底✅ 适合后台管理系统、CRUD 列表 表单密集型页面需要快速原型验证的项目混合技术栈npm 方式嵌进 React 项目或不依赖 npm像 Vue/jQuery 那样外链 sdk.js 挂到任意页面快速上手从 npm 安装到第一个页面 4 步装核心库npm i amis。注意官方要求 React16.8.6、mobx^4.5.0版本不一致后面会报错。装可选依赖npm i axios copy-to-clipboard用于示例里的请求和剪贴板换成你项目里已有的请求库即可。引入主题样式cxd 主题需要三个 cssamis/lib/themes/cxd.css、amis/lib/helper.css、amis/sdk/iconfont.css想要仿 Antd 风格就把第一个换成antd.css。挂载渲染函数。render(schema, props, env)是三个参数的函数env 里唯一必须实现的是fetcher。完整步骤可对照 快速开始文档。import { render as renderAmis } from amis; // 渲染入口 import { ToastComponent, AlertComponent } from amis-ui; // 通知与弹窗容器 // 引入 cxd 主题的三个样式文件 import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; ToastComponent themecxd positiontop-right / AlertComponent themecxd / {renderAmis( { type: page, title: 我的第一个页面, body: Hello amis }, // schema页面蓝图 {}, // props初始数据比如 { data: { username: xx } } { theme: cxd, // 主题名要和引入的 css 一致 // 唯一必选项请求适配器可换成 axios 或你的公司请求层 fetcher: ({ url, method, data, headers }) axios({ url, method, data, headers }) } )}概念对齐写配置前先弄清 4 个术语术语一句话定义类比或例子Schema页面的 JSON 配置由 type 属性构成树page是唯一的顶级节点像一张页面蓝图写清楚每个区域是什么组件env注入外部能力的配置集包含主题、语言、各种回调fetcher、jumpTo、theme 都在里面fetcher 是唯一必实现项Scoped渲染后拿到的句柄可按名字取组件、执行动作像遥控器从外部操控已渲染好的页面Renderertype 到 React 组件的注册表内置的 page、form、input-text 都是这样注册的核心原理JSON 是怎么变成 React 组件的整个渲染过程就一件事按 type 查注册表再把属性当 props 传下去。每个节点先拿type去组件池找渲染器命中就把节点转成对应 React 组件其余属性全部变成 props没命中就报找不到渲染器。page、form 这类容器组件自己不知道body里装的是什么所以框架给它们下发一个render回调调用render(body, body)递归进入下一轮查找。源码级的讲解可以看 amis 工作原理。另一半是你必须自己写的部分amis 只负责渲染网络、跳转、提示都靠 env 注入。fetcher 决定请求怎么发接口有统一包装结构时不要改 schema 里每个 api用全局responseAdaptor解包即可开发用 localhost、线上用正式域名用replaceText做前缀替换不用维护两份配置。当内置类型不够时注册一个自己的渲染器即可之后 schema 里用你的 type 就能被识别import { Renderer } from amis; // 组件注册工具 // 不支持 Decorator 时改成函数式Renderer({ type: my-status })(MyStatus) Renderer({ type: my-status, autoVar: true }) // autoVar 自动解析配置里的变量 class MyStatus extends React.Component { render() { // 配置节点里的所有属性都会变成 props const { status } this.props; return span{status 1 ? 可用 : 离线}/span; } } // 注册后即可在 schema 中使用{ type: my-status, status: 1 }只想在一处用的话更轻量的做法是配置里直接写asFormItem: true加children函数连注册都省了细节见 自定义组件 - React。和现有技术栈的结合请求、路由、状态三个决策点请求层fetcher 里调你公司的请求库token 注入、错误码转提示统一在这一处做只解包响应结构用responseAdaptorschema 保持干净。路由两种方式二选一。a) 把 amis 当作某个路由的内容区页面切换仍由你的 router 负责jumpTo、updateLocation用 history 实现b) 让 amis 管理整站用内置 app 渲染器配 hash 路由自己实现isCurrentUrl判断当前地址。单页后台选 a轻量整站选 b。状态初始值走props.data3.1.0 起还支持context传平台级数据外部变化用 scoped 写回全局数据域amis 内部状态不必接进 Redux传进去、写回来、用 scoped 控制三招就够。另外官方可视化编辑器amis-editor可以直接嵌进现有后台让产品或运营自己改页面配置// 通过 props 的 scopeRef 回调拿到 scoped等价于 SDK 里的 amisScoped amisScoped.updateProps({ data: { currentUser: Alice } }); // 把新数据写回全局数据域 amisScoped.getComponentByName(userTable).reload(); // 按名字重载表格schema 里要有 name: userTable踩坑实录amis 集成高频问题React 项目集成后报错或渲染异常—— 现象import 后白屏或报 MobX 相关错误。原因项目里 Mobx 是 5/6amis 出于兼容考虑用的是 Mobx 45/6 肯定会报错。解决把 mobx 降到^4.5.0版本对齐 amis 项目的 package.json。CRUD 分页失效—— 现象翻页时接口 URL 里没有 page、perPage 参数返回全量数据。原因api 地址里带变量如${id}时amis 不会自动附加分页参数。解决在 URL 里手动拼?page${page}perPage${perPage}。页面顶部被固定头遮挡—— 现象项目有吸顶导航CRUD 顶部工具条被盖住。原因affixHeader 固顶功能的偏移量默认是 0。解决3.5.0 起给外层设置--affix-offset-topCSS 变量或在 schema 里配affixHeader: false。返回文本里的 \n 不换行—— 现象接口返回的换行在页面上挤成一行。原因浏览器默认折叠连续空白字符。解决给组件加wrapperComponent: pre或classname: white-space-pre。开发环境页面异常—— 现象dev 下渲染错乱生产正常。原因React.StrictMode 目前还不支持。解决把 StrictMode 从 amis 渲染处摘掉。效果对比接入 amis 后哪些地方变了指标接入前接入后变化幅度表单 / CRUD 页实现手写组件、串状态、做校验JSON 配置直出含校验和布局工作量明显下降多页面风格一致性靠规范和 code review 维持统一内置主题与组件风格明显提升需求变更成本加字段、加列改 React 组件再回归测试改 schema 一处编辑器里即时预览明显下降配置可读与交接需要读懂组件代码JSON 配置直接可读对新成员更友好边界说明后台 CRUD、表单密集类页面是 amis 的甜点位交互高度定制、追求极致性能或非 Web 形态的页面仍然建议手写 React。收尾读完就能动手的行动清单用 render fetcher 三步跑通第一个 page 页面把 fetcher 接到公司请求库统一 token 注入与错误提示实现 jumpTo 和 updateLocation接入现有路由挑一个真实 CRUD 需求列表 筛选 编辑弹窗用 schema 写完装 amis-editor把可视化编辑器嵌成后台的配置页给关键组件统一加 name 属性方便 scoped 按名字取组件【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
20 分钟把 amis 接入 React 项目用 JSON 配置生成后台页面【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis产品让你加一个用户列表 筛选 编辑弹窗的后台页面你本来要手写 JSX 再串联状态。而开源低代码框架 amis 能用一份 JSON 配置直接生成整页并且可以嵌进现有 React 项目不改技术栈。先判断值不值得用3 类场景别硬上❌ 不建议交互高度定制的页面拖拽、画布、复杂动画内置渲染器只覆盖后台常见场景硬套反而费事要求极致首屏性能或精确控制包体积的场景低代码渲染多一层开销团队完全不会 Reactschema 是 JSON但自定义组件、编辑器插件终究要 React 功底✅ 适合后台管理系统、CRUD 列表 表单密集型页面需要快速原型验证的项目混合技术栈npm 方式嵌进 React 项目或不依赖 npm像 Vue/jQuery 那样外链 sdk.js 挂到任意页面快速上手从 npm 安装到第一个页面 4 步装核心库npm i amis。注意官方要求 React16.8.6、mobx^4.5.0版本不一致后面会报错。装可选依赖npm i axios copy-to-clipboard用于示例里的请求和剪贴板换成你项目里已有的请求库即可。引入主题样式cxd 主题需要三个 cssamis/lib/themes/cxd.css、amis/lib/helper.css、amis/sdk/iconfont.css想要仿 Antd 风格就把第一个换成antd.css。挂载渲染函数。render(schema, props, env)是三个参数的函数env 里唯一必须实现的是fetcher。完整步骤可对照 快速开始文档。import { render as renderAmis } from amis; // 渲染入口 import { ToastComponent, AlertComponent } from amis-ui; // 通知与弹窗容器 // 引入 cxd 主题的三个样式文件 import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; ToastComponent themecxd positiontop-right / AlertComponent themecxd / {renderAmis( { type: page, title: 我的第一个页面, body: Hello amis }, // schema页面蓝图 {}, // props初始数据比如 { data: { username: xx } } { theme: cxd, // 主题名要和引入的 css 一致 // 唯一必选项请求适配器可换成 axios 或你的公司请求层 fetcher: ({ url, method, data, headers }) axios({ url, method, data, headers }) } )}概念对齐写配置前先弄清 4 个术语术语一句话定义类比或例子Schema页面的 JSON 配置由 type 属性构成树page是唯一的顶级节点像一张页面蓝图写清楚每个区域是什么组件env注入外部能力的配置集包含主题、语言、各种回调fetcher、jumpTo、theme 都在里面fetcher 是唯一必实现项Scoped渲染后拿到的句柄可按名字取组件、执行动作像遥控器从外部操控已渲染好的页面Renderertype 到 React 组件的注册表内置的 page、form、input-text 都是这样注册的核心原理JSON 是怎么变成 React 组件的整个渲染过程就一件事按 type 查注册表再把属性当 props 传下去。每个节点先拿type去组件池找渲染器命中就把节点转成对应 React 组件其余属性全部变成 props没命中就报找不到渲染器。page、form 这类容器组件自己不知道body里装的是什么所以框架给它们下发一个render回调调用render(body, body)递归进入下一轮查找。源码级的讲解可以看 amis 工作原理。另一半是你必须自己写的部分amis 只负责渲染网络、跳转、提示都靠 env 注入。fetcher 决定请求怎么发接口有统一包装结构时不要改 schema 里每个 api用全局responseAdaptor解包即可开发用 localhost、线上用正式域名用replaceText做前缀替换不用维护两份配置。当内置类型不够时注册一个自己的渲染器即可之后 schema 里用你的 type 就能被识别import { Renderer } from amis; // 组件注册工具 // 不支持 Decorator 时改成函数式Renderer({ type: my-status })(MyStatus) Renderer({ type: my-status, autoVar: true }) // autoVar 自动解析配置里的变量 class MyStatus extends React.Component { render() { // 配置节点里的所有属性都会变成 props const { status } this.props; return span{status 1 ? 可用 : 离线}/span; } } // 注册后即可在 schema 中使用{ type: my-status, status: 1 }只想在一处用的话更轻量的做法是配置里直接写asFormItem: true加children函数连注册都省了细节见 自定义组件 - React。和现有技术栈的结合请求、路由、状态三个决策点请求层fetcher 里调你公司的请求库token 注入、错误码转提示统一在这一处做只解包响应结构用responseAdaptorschema 保持干净。路由两种方式二选一。a) 把 amis 当作某个路由的内容区页面切换仍由你的 router 负责jumpTo、updateLocation用 history 实现b) 让 amis 管理整站用内置 app 渲染器配 hash 路由自己实现isCurrentUrl判断当前地址。单页后台选 a轻量整站选 b。状态初始值走props.data3.1.0 起还支持context传平台级数据外部变化用 scoped 写回全局数据域amis 内部状态不必接进 Redux传进去、写回来、用 scoped 控制三招就够。另外官方可视化编辑器amis-editor可以直接嵌进现有后台让产品或运营自己改页面配置// 通过 props 的 scopeRef 回调拿到 scoped等价于 SDK 里的 amisScoped amisScoped.updateProps({ data: { currentUser: Alice } }); // 把新数据写回全局数据域 amisScoped.getComponentByName(userTable).reload(); // 按名字重载表格schema 里要有 name: userTable踩坑实录amis 集成高频问题React 项目集成后报错或渲染异常—— 现象import 后白屏或报 MobX 相关错误。原因项目里 Mobx 是 5/6amis 出于兼容考虑用的是 Mobx 45/6 肯定会报错。解决把 mobx 降到^4.5.0版本对齐 amis 项目的 package.json。CRUD 分页失效—— 现象翻页时接口 URL 里没有 page、perPage 参数返回全量数据。原因api 地址里带变量如${id}时amis 不会自动附加分页参数。解决在 URL 里手动拼?page${page}perPage${perPage}。页面顶部被固定头遮挡—— 现象项目有吸顶导航CRUD 顶部工具条被盖住。原因affixHeader 固顶功能的偏移量默认是 0。解决3.5.0 起给外层设置--affix-offset-topCSS 变量或在 schema 里配affixHeader: false。返回文本里的 \n 不换行—— 现象接口返回的换行在页面上挤成一行。原因浏览器默认折叠连续空白字符。解决给组件加wrapperComponent: pre或classname: white-space-pre。开发环境页面异常—— 现象dev 下渲染错乱生产正常。原因React.StrictMode 目前还不支持。解决把 StrictMode 从 amis 渲染处摘掉。效果对比接入 amis 后哪些地方变了指标接入前接入后变化幅度表单 / CRUD 页实现手写组件、串状态、做校验JSON 配置直出含校验和布局工作量明显下降多页面风格一致性靠规范和 code review 维持统一内置主题与组件风格明显提升需求变更成本加字段、加列改 React 组件再回归测试改 schema 一处编辑器里即时预览明显下降配置可读与交接需要读懂组件代码JSON 配置直接可读对新成员更友好边界说明后台 CRUD、表单密集类页面是 amis 的甜点位交互高度定制、追求极致性能或非 Web 形态的页面仍然建议手写 React。收尾读完就能动手的行动清单用 render fetcher 三步跑通第一个 page 页面把 fetcher 接到公司请求库统一 token 注入与错误提示实现 jumpTo 和 updateLocation接入现有路由挑一个真实 CRUD 需求列表 筛选 编辑弹窗用 schema 写完装 amis-editor把可视化编辑器嵌成后台的配置页给关键组件统一加 name 属性方便 scoped 按名字取组件【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
![Delphi 11中[]字符串索引的本质：UTF-16代码单元与内存直访](http://pic.xiahunao.cn/yaotu/Delphi 11中[]字符串索引的本质：UTF-16代码单元与内存直访)
