把 amis 快速接入现有 React 项目JSON 低代码搭管理后台的完整指南【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis老板甩来一句话一周内要一个后台用户列表、表单、弹窗一个都不能少。你翻了一下现有项目React TypeScript人手紧没人有空手写页面。这就是 amis 最能打的那种场景——用 JSON 低代码配置生成页面直接塞进你现有的 React 工程里跑。下面不讲大而全的知识点就按我们怎么把它跑起来、跑顺、跑快的顺序走一遍。先判断你的项目适不适合上 amis React上不上 amis先别看教程先过一遍这张表。对号入座能帮你省掉一周的折腾。你的情况判断为什么增删改查密集的管理页面列表、搜索、表单、弹窗✅ 推荐CRUD、form 是 amis 打磨最深的两块配置即所得需要快速验证的页面、临时需求✅ 推荐改 JSON 就能看到效果不用等组件开发排期团队会写 JSON、前端人手少✅ 推荐页面逻辑沉在配置里前端只维护一层薄薄的接入代码一两个页面赶工期其余页面稳定 部分使用别全盘替换赶工期的页面用 amis和 React 代码共存C 端页面交互复杂、动效多❌ 不建议配置会跟你的需求互相打架手写 React 更直接像素级定制视觉、深度换肤❌ 不建议主题靠 CSS 变量定制成本可能比自研还高一句话amis 管标准 CRUD 后台React 继续管有特殊要求的页面。两者不冲突可以混着用。在现有 React 项目里跑通 amis 第一屏跑通比什么都重要。先把第一屏渲染出来再谈别的。1. 安装并对齐版本npm i amis版本有硬要求React16.8.6mobx 需要^4.5.0React 17 要求 amis1.6.5。这条后面坑点里还会再提一次因为真的很容易翻车。2. 写一个最薄的渲染组件amis 暴露的render函数收三个参数schema页面图纸、props初始数据、env环境能力如请求器。最小写法// AmisPage.tsx import React from react; import {render as renderAmis} from amis; import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; export default function AmisPage({schema}: {schema: any}) { return renderAmis(schema, {}, { fetcher: async ({url, method, data}) (await fetch(url, {method, body: JSON.stringify(data)})).json() }); }fetcher是必填项先糊一个能用的。schema 可以简单到这种程度{ type: page, title: 用户管理, body: { type: crud, api: /api/users, columns: [ {name: name, label: 姓名}, {name: email, label: 邮箱} ] } }把它传给AmisPage schema{schema} /刷新页面——列表出来了翻页、加载态都是现成的。schema 就是给页面画的图纸type声明节点是什么组件body声明它里面放什么靠树形结构一层层拼出整页。更完整的 CRUD 配置含编辑弹窗表单可以参考docs/zh-CN/components/crud.md。跑通之后补上三件事第一屏只是能看。要能用把下面三件事挨个勾掉。数据接入把 fetcher 接到项目统一的请求层路由打通跳转走你自己的 Router主题与样式确定用哪套皮肤数据接入写一个正经的 fetcher别用fetch糊弄长期方案。把 fetcher 接到项目已有的 axios 实例上登录态、统一报错、埋点一次全带上const env { theme: cxd, fetcher: async ({url, method, data, headers}) { const res await request({ // request 是你们项目的统一请求封装 url, method, data, headers }); return res.data; } };amis 里所有api字段的请求都会走这个函数。它拿得到url、method、data、headers返回 Promise 即可。路由打通jumpTo 接你的 Routeramis 不关心你用什么路由它把跳转交给你实现。在 env 里补一个jumpTojumpTo: to navigate(to) // navigate 来自你们的 react-router配置里actionType: link、url之类的跳转动作最终都落到这个方法。页面内导航、左侧菜单配合app渲染器就能组织起来参考docs/zh-CN/components/app.md。主题两套皮肤二选一主题样式文件env.theme云舍默认amis/lib/themes/cxd.csscxd仿 Antdamis/lib/themes/antd.cssantdCSS 引进来、env.theme对上就完了。二次换肤不用改 CSS 文件主题色这类都走 CSS 变量说明见docs/zh-CN/style/css-vars.md。amis 自定义组件怎么注册很多人对 amis 的误解是只能写配置插不进来代码。不是的。它有三种插法从临时到正式配置里内联给某个节点加children一个返回 JSX 的函数asFormItem: true当场就能用但只在当前配置生效不可复用。注册普通渲染器用Renderer装饰器或Renderer(opts)(Comp)函数式写法把组件挂进 amis之后任何 schema 里写type: 你的类型名就能渲染。注册表单项用FormItemlabel、校验、三种表单布局全部免实现你只管回显值和改值两件事。注册一个普通渲染器import {Renderer} from amis; Renderer({type: user-card, autoVar: true}) class UserCard extends React.Componentany { render() { const {name, title} this.props; return div{name} · {title}/div; } }注册一个表单项import {FormItem} from amis; FormItem({type: my-color}) class MyColor extends React.Componentany { render() { const {value, onChange} this.props; return ( input typecolor value{value || #f00} onChange{e onChange(e.target.value)} / ); } }两个实用细节autoVar: true让组件参数自动解析${xxx}变量需要渲染子节点时props 里的render(body, node)就是口子。注册完的组件还会出现在可视化编辑器里非开发人员也能拖——注册实现可以看packages/amis-core/src/factory.tsx完整写法见docs/zh-CN/extend/custom-react.md。懒加载与 schema 缓存两个不疼的工程化动作点到为止够用就行。懒加载整包。amis 本身体量不小别打进首屏 chunk。用一个lazy包一层const AmisPage lazy(() import(./AmisPage)); // Suspense fallback{Spin /}AmisPage schema{s} //Suspense缓存 schema。如果配置是后端下发的前端按 key 缓存一份发布时再失效避免每次进页面都拉一遍 JSONconst cache new Map(); const loadSchema key cache.get(key) || fetch(/schemas/${key}.json).then(r { cache.set(key, r); return r.json(); });大列表提速。CRUD 有个lazyRenderAfter配置默认 100意思是超过这个行数的延迟渲染。数据量大时调小它首屏会快一截见docs/zh-CN/start/faq.md。踩坑实录我踩过的坑和绕法都是真实场景里会撞上的按踩坑频率排⚠️装完就报错白屏或运行时报错。九成是 mobx 版本。amis 依赖 mobx^4.5.0mobx 5/6 肯定挂。检查package.json里实际装上的版本必要时用 overrides 锁住。CRUD 分页突然没了。因为 api 里带了变量比如/api/users/${id}——这种情况 amis 不会自动拼page、perPage参数。手动拼上/api/users/${id}?page${page}perPage${perPage}。顶部工具栏和你们已有的吸顶元素叠一起了。渲染前设置 CSS 变量--affix-offset-top留出间距或者在 CRUD 上配affixHeader: false关掉固顶。别包 StrictMode。amis 目前不支持React.StrictMode的双调用把它从包裹 amis 那棵子树上去掉。样式冲突。别图省事在容器上写all: initialamis 的样式会全没。正确姿势独立容器包一层主题色用 CSS 变量微调。配置里 URL 环境不一致。开发用localhost、线上用域名用 env 的replaceText做整体替换schema 里写占位符即可。前后对比收益到底有多大拿用户管理这一个页面列表 搜索 新建/编辑表单 删除确认做对比数字是我们项目里的真实体感维度手写 React 组件接入 amis 后工期4~5 人日0.5~1 人日大头花在接 fetcher需要维护的代码约 2000 行组件与状态代码约 200 行 JSON 配置 一层接入代码改一个字段展示改组件、调样式、回归测试配置里改一个字段页面风格一致性取决于谁写的内置组件风格统一上手门槛得熟 React 和组件库会写 JSON 就能改页面当然要说句公道话提速主要在页面层。接口没有的话联调时间一分不会少。一句话结论上不上 amis如果你的页面主体是列表 搜索 表单 弹窗上 amis一周的后台变一周能收尾如果页面主体是重交互、重视觉定制手写 React别硬塞配置。两个页面类型在同一个工程里各干各的才是最省心的用法。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
