Reka UI logoReka UI 中文文档
backdrop
Examples
指南

注入上下文

利用 injectContext 增强 Reka UI 中的组件组合能力，实现强大而灵活的 UI 开发。

谨慎使用！API 可能变更

Reka UI 对外暴露了内部 injectContext 功能，以进一步扩展组合和构建复杂组件的能力。然而，该 API 最初设计为内部使用。因此，API 可能会在不经通知的情况下发生变更。

injectContext 简介

在 Reka UI 中，所有根组件及某些其他组件都导出一个 injectContext 函数，这是管理组件状态和实现无缝组合的关键特性。本指南将展示如何基于提供的上下文构建您自己的子组件。

什么是 injectContext？

injectContext 是每个 Reka UI 组件提供的函数，允许您访问该组件的内部状态和方法。

它利用 Vue 的 Provide / Inject 机制，提供了一种扩展和自定义组件行为的强大方式。

基本用法

以下是使用 Reka UI 手风琴（Accordion）组件的 injectContext 的简单示例：

vue
<!-- CustomAccordionContent.vue -->
<script setup>
import { injectAccordionItemContext, injectAccordionRootContext } from 'reka-ui'

const accordionRootContext = injectAccordionRootContext()
const accordionItemContext = injectAccordionItemContext()

const isSingleOpen = computed(() =>
  accordionRootContext.isSingle.value && accordionItemContext.open.value
)
</script>

<template>
  <div>
    …
  </div>
</template>

常见用例

  1. 自定义样式：访问内部状态以根据组件状态应用动态样式。
  2. 扩展功能：基于现有组件逻辑构建新功能。
  3. 复杂布局：通过组合多个组件并在它们之间共享状态来创建复杂的 UI 模式。
  4. 无障碍功能增强：利用内部方法和状态改进键盘导航或屏幕阅读器支持。

最佳实践

  1. 在子组件或组合函数中使用 injectContext，而不是在组件自身内部使用。
  2. 使用前始终检查注入的上下文是否存在，因为若在组件作用域外使用，它可能为 undefined。
  3. 可能时优先使用提供的 props 和 events，并在更高级的场景中使用 injectContext。
  4. 使用 TypeScript 时，利用 injectContext 提供的类型信息以提高代码质量。