mcpField
R
react18-legacy-context

react18-legacy-context

github.com/github开发40.5k746 次安装今天更新
代码仓库

关于 react18-legacy-context

用于将 React 旧版 context 迁移到现代 context API 的技能。它强调协调 context 模块、提供者及所有消费者，并提供扫描命令和参考示例，帮助避免跨文件迁移遗漏。

主要功能

  1. 01定位旧版提供者和消费者
  2. 02协调跨文件迁移步骤
  3. 03创建 context 模块
  4. 04更新类组件和函数组件消费者
  5. 05检查旧版警告是否消失

适用场景

  1. 01为 React 19 升级做准备
  2. 02迁移单个旧版 context
  3. 03更新使用多个 context 的应用
  4. 04检查是否遗漏 context 消费者

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/github/awesome-copilot --skill react18-legacy-context

安装后在 Claude Code 中输入/react18-legacy-context确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
context-file-template.md
multi-context.md
single-context.md

详细介绍

React 18 旧版 Context 迁移

旧版 context（contextTypes、childContextTypes、getChildContext）在 React 16.3 中已被弃用，并在 React 18.3.1 中发出警告。它在 React 19 中被移除。

这始终是跨文件迁移

与大多数一次只涉及一个文件的迁移不同，context 迁移需要协调：

  1. 创建 context 对象（通常是一个新文件）
  2. 更新 provider 组件
  3. 更新每一个消费者组件

遗漏任何一个消费者都会导致应用崩溃——它会从错误的 context 读取数据，或者得到 undefined。

迁移步骤（务必遵循此顺序）

Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain

扫描命令

# Find all providers
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find all consumers
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find this.context usage (may be legacy or modern - check which)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

参考文件

  • references/single-context.md - 单个 context（theme、auth 等）的完整迁移，包含 provider + 类消费者 + 函数消费者
  • references/multi-context.md - 具有多个旧版 context 的应用（嵌套 provider、多个不同 context 的消费者）
  • references/context-file-template.md - 新 context 模块的标准文件结构

评论

支持 Markdown