@ contentful/ experience- sdk- react
反应支持
需要反应和反应DOM 18或以后. 反应 16 和 17 消费者在安装此版本之前,必须升级两个包. SDK使用Zustand 5,它依赖于反应 18's useSyncExternalStore API (英语).
目的
- 要捆绑并曝光其他包中的功能,供最终用户使用. 这是用户将安装的软件包并导入到自己的React项目.
- 注意,这是针对特定反应的包. 因此,与核心软件包不同的是,在这里执行React特定兼容性,对其他前端框架的支持将导致在单独的命名空间下创建出一个新的软件包.
概念
- 经验对象:对什么是经验的通用打字定义. 包含关于组件树,无约束值,以及从内容条目中转换出的数据源的信息,这样经验包就可以使用被转换对象,处理被操纵到树上,验证其值,并将经验对象更新到内容条目中,作为用户触发并保存其更改.
- 经验:用户将在其反应项目中使用的主要切入点组件,在经验对象中将它作为道具。 经验对象可以通过多种方式取出. 例如,Vite反应项目的一个常见方法是使用
useFetchBySlug/useFetchById钩子. 然而,对于安保部门改革,他们将使用fetchBySlug/fetchById函数。 此外,用户可以使用自定义的变换来创建自己的体验对象,并将被变换的对象作为道具传递给ExperienceRoot但物体必须符合经验类型. - 安全部门改革:使SDK与SSR相容是在SDK包本身中提供的. 然而,人们正在讨论将逻辑纳入今后的核心一揽子计划.
- 断点:定义我们如何为每个取景口分别桌面,平板电脑和移动断点.
- 预览 vs Live vs编辑器模式:编辑器模式是在Contentful Web app中看到的关于组件侧边栏,可视化编辑器的经验,以及设计侧边栏中允许用户拖放组件,编辑样式,并发布更改的内容. Live模式是查看用户在已发布更改方面的经验的能力. 预览模式(Preview mode)是指能够看到用户在未发表的更改中的经历.
- 预览交付 Root 相对于视觉编辑器 Root: 在
ExperienceRoot.tsx文档中,请注意有逻辑来渲染<VisualEditorRoot>对<PreviewDeliveryRoot>根据用户是否处于编辑器模式。 两种相容物的注释,它们都有自己通过整个构件树进行解析的方法,并将构件制成UI. 这是因为Visual编辑器必须添加可拖放的包式 divs,而Preview的发送只能按原样将组件打印到UI. 此外,"预览交付"这个名称将"活"和"预览模式"概念汇合为一个想法. 在现实中,PreviewdeliveRoot更像Live模式概念. 有计划进行平移并构建预览和重命名的第三个模式<PreviewDeliveryRoot>仅仅<DeliveryRoot>或者说<LiveRoot>。 。 。 . - 预览 vs 交付 API:每个体验对象将从通过Contentful的"传送"或"预览API"获取的内容条目取出其真实的来源. 用户会定义设置体验时使用的API. 这不应与“审查”或“交付/生活”模式相混淆,因为它们是独立的实体.
- 书记官处: 采用组件定义并将其登记到UI中
enrichComponentDefinition函数将应用被组件本身定义为默认样式的样式。 这将确保用户拖曳内置或结构组件将显示由Contentful定义的默认样式.