3步把 amis 接入现有 React 项目用 JSON 配置生成整页【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 是百度开源的前端低代码框架用 JSON 配置就能生成后台管理页面。本文带你跑通把它接入现有 React 项目的最小路径讲清背后的数据流机制和三个高频坑。读完你会有一个能跑的 CRUD 页面以及判断它值不值得引入的依据。它替你省掉的事收益核心是不再手写三类最耗时的页面且配置集中在一个 JSON 文件里后端同学也能直接改平时要手写的amis 里的写法表格 分页 筛选表单一个 crud 配置块表单字段 校验规则 提交接口一个 form 配置块编辑弹窗 / 详情页表格列上一个 dialog 动作视觉组件全部内置你不需要为 UI 一致性额外立规范。最小接入路径1. 装依赖。amis 要求 React ≥ 16.8.6运行时还依赖 mobx ^4.5.0先确认版本不冲突npm i amis2. 引入主题样式。默认用 cxdAntd 系项目换成 antd.cssimport amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css;3. 用 render 函数渲染并实现必选接口。env.fetcher是必选项amis 内部所有接口请求都从它出去直接转交你项目的 axios 实例即可renderAmis(schema, { data }, { theme: cxd, fetcher: ({ url, method, data, config {} }) axiosmethod.then(res res.data) });注意npm 安装方式下不传 fetcher 就不会发任何请求这是和 SDK 外链版本最大的区别。4. 挂到路由上。把一条路由的页面换成一份 JSON 配置crud加columns就是完整列表页不写任何 React 组件初始数据通过props.data传入内部所有组件都能读到。背后的工作原理一句话amis 把 JSON 配置递归翻译成 React 组件树所有交互状态走同一条数据链。表单提交、表格翻页、筛选变化走的都是同一个闭环事件改数据链里的数据受影响的组件重渲染新请求统一经过你注册的 fetcher。这也是一个 fetcher 管全站的原因——鉴权头、响应解包、错误 toast 都能在这一处集中处理。对外控制同理给节点设name就能从渲染拿到的 scoped 对象上按点分名取到组件调getValues、setValues、reload等方法。三个容易踩的坑页面渲染了但没有任何请求发出。原因是 npm 安装方式下env.fetcher是必选接口render 里漏传就静默失败。解法用项目现成的 axios 封装实现它并且记得解包响应amis 只把 fetcher 的返回值当接口数据用。toast 通知、确认弹窗不出现也不报错。原因是通知体系依赖 amis-ui 的ToastComponent和AlertComponent挂在 DOM 上只引样式不挂组件时所有提示都会丢。解法在页面根部各挂载一次theme 与 render 保持一致。开 StrictMode 后页面闪烁或重复发请求。原因官方明确暂不支持 StrictModeReact 的双挂载机制会打断 amis 内部数据链的初始化。解法在开发环境和产物里都关掉它若担心影响其他组件可在仅挂载 amis 的路由上单独关闭。什么时候该用、什么时候别用 后台管理系统用户列表、角色配置、运营台表单 表格 弹窗占八成页面的项目 自定义交互密集的页面配置里可以写children/component塞 React 组件但塞得越多JSON 配置越难维护 像素级定制的 C 端营销页、对首屏有极致性能要求的场景amis 外观是固定设计系统改不到像素级接下来快速开始SDK 与 React 两种用法的完整说明自定义组件 - React注册你自己的渲染器可视化编辑器用拖拽界面编辑 JSON 配置【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3步把 amis 接入现有 React 项目：用 JSON 配置生成整页
3步把 amis 接入现有 React 项目用 JSON 配置生成整页【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisamis 是百度开源的前端低代码框架用 JSON 配置就能生成后台管理页面。本文带你跑通把它接入现有 React 项目的最小路径讲清背后的数据流机制和三个高频坑。读完你会有一个能跑的 CRUD 页面以及判断它值不值得引入的依据。它替你省掉的事收益核心是不再手写三类最耗时的页面且配置集中在一个 JSON 文件里后端同学也能直接改平时要手写的amis 里的写法表格 分页 筛选表单一个 crud 配置块表单字段 校验规则 提交接口一个 form 配置块编辑弹窗 / 详情页表格列上一个 dialog 动作视觉组件全部内置你不需要为 UI 一致性额外立规范。最小接入路径1. 装依赖。amis 要求 React ≥ 16.8.6运行时还依赖 mobx ^4.5.0先确认版本不冲突npm i amis2. 引入主题样式。默认用 cxdAntd 系项目换成 antd.cssimport amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css;3. 用 render 函数渲染并实现必选接口。env.fetcher是必选项amis 内部所有接口请求都从它出去直接转交你项目的 axios 实例即可renderAmis(schema, { data }, { theme: cxd, fetcher: ({ url, method, data, config {} }) axiosmethod.then(res res.data) });注意npm 安装方式下不传 fetcher 就不会发任何请求这是和 SDK 外链版本最大的区别。4. 挂到路由上。把一条路由的页面换成一份 JSON 配置crud加columns就是完整列表页不写任何 React 组件初始数据通过props.data传入内部所有组件都能读到。背后的工作原理一句话amis 把 JSON 配置递归翻译成 React 组件树所有交互状态走同一条数据链。表单提交、表格翻页、筛选变化走的都是同一个闭环事件改数据链里的数据受影响的组件重渲染新请求统一经过你注册的 fetcher。这也是一个 fetcher 管全站的原因——鉴权头、响应解包、错误 toast 都能在这一处集中处理。对外控制同理给节点设name就能从渲染拿到的 scoped 对象上按点分名取到组件调getValues、setValues、reload等方法。三个容易踩的坑页面渲染了但没有任何请求发出。原因是 npm 安装方式下env.fetcher是必选接口render 里漏传就静默失败。解法用项目现成的 axios 封装实现它并且记得解包响应amis 只把 fetcher 的返回值当接口数据用。toast 通知、确认弹窗不出现也不报错。原因是通知体系依赖 amis-ui 的ToastComponent和AlertComponent挂在 DOM 上只引样式不挂组件时所有提示都会丢。解法在页面根部各挂载一次theme 与 render 保持一致。开 StrictMode 后页面闪烁或重复发请求。原因官方明确暂不支持 StrictModeReact 的双挂载机制会打断 amis 内部数据链的初始化。解法在开发环境和产物里都关掉它若担心影响其他组件可在仅挂载 amis 的路由上单独关闭。什么时候该用、什么时候别用 后台管理系统用户列表、角色配置、运营台表单 表格 弹窗占八成页面的项目 自定义交互密集的页面配置里可以写children/component塞 React 组件但塞得越多JSON 配置越难维护 像素级定制的 C 端营销页、对首屏有极致性能要求的场景amis 外观是固定设计系统改不到像素级接下来快速开始SDK 与 React 两种用法的完整说明自定义组件 - React注册你自己的渲染器可视化编辑器用拖拽界面编辑 JSON 配置【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考