SuperAPI AI 工具集

phoenix-app-clip

前端与建站

查看项目

更新于 10-16 05:50

技能介绍

用途:处理 Phoenix LiveView 与内嵌 React 元素之间的衔接,即 app-clip 集成模式。只负责把 React 组件接入 LiveView,并打通两条数据通道,不规定组件用什么 UI 库、内部状态或样式。

主要能力:一是挂载,LiveView 渲染一个空节点,由 JS hook 在其中创建 React root,并在 destroyed() 时干净卸载;二是数据传递,支持 Phoenix 到 React 的初始值与实时更新,以及 React 到 Phoenix 的事件与导航。

使用方式:占位节点需带 phx-hook="MountClip"、phx-update="ignore" 和 data-props={Jason.encode!(@initial)}。phx-update="ignore" 为必需,否则 LiveView 的 DOM diff 会与 React 冲突。hook 在 mounted() 中先保存 this.root 再渲染,destroyed() 中调用 this.root?.unmount()。初始数据经 data-* 属性传入,实时更新用 LiveView push_event/3 配合 hook 的 handleEvent,React 回传用 bridge 中的 pushEvent 与 navigate。

适用场景:需要在 LiveView 页面中嵌入 React 组件并交换数据的项目。

限制:节点内容被 ignore 后不能靠改内容做实时更新,须走事件通道;组件本身由用户自行实现;资料未提供具体收费、平台或效果信息。