React Context实现低样板代码确认模态框的思路与问题咨询

问题场景 #

你正在学习React的Context概念，希望用它实现一个可复用的确认模态框，尽量减少使用者的样板代码。你原本设想的实现方式是在根节点挂载ConfirmDialog组件，然后通过调用ShowConfirmModal函数就能触发模态框，但代码无法运行，核心问题是错误地尝试从useContext中解构出类似useState的状态更新函数，并且在普通函数中使用了React Hook。

你的代码示例：

主App导入代码 #

import {ConfirmDialog, ShowConfirmModal} from './components/ConfirmDialog';

components/ConfirmDialog.js代码 #

import React, {createContext, useContext} from "react";
import {ModalDialog, Text} from "@forge/react";

const context = createContext({ isOpen: false })

export const ConfirmDialog = () => {
    const _context = useContext(context)
    return _context.isOpen && <ModalDialog header={_context.title} onClose={_context.onClose} closeButtonText='Confirm'>
        <Text>{_context.message}</Text>
    </ModalDialog>
}

export const ShowConfirmModal = (title, message, onClose) => {
    const [_context, _setContext] = useContext(context)
    _setContext({
        message, title, onClose, isOpen: true
    })
}

核心误解 #

1. Context不是状态管理工具：Context的作用是跨组件传递状态，而不是像useState那样管理状态。你不能从useContext中获取状态更新函数——更新函数必须由状态的持有者（比如某个组件）提供。
2. Hook的使用规则：useContext是React Hook，只能在React组件的顶层或自定义Hook内部调用，不能在普通函数（比如ShowConfirmModal）中使用。

React思维的调整方向 #

从MVC转到React，核心是从“命令式调用函数修改状态”转向“声明式描述状态与UI的映射”，具体到你的需求，调整思路如下：

1. 拆分状态管理与状态传递 #

• 用useState或useReducer在一个Provider组件内部管理模态框的状态（isOpen、title、message等），同时定义更新状态的方法（比如showModal、hideModal）。
• 把这些状态和方法通过Context的Provider传递给子组件，而不是让外部函数直接修改Context。

2. 用组件+自定义Hook封装逻辑 #

• 不要暴露普通函数ShowConfirmModal，而是封装一个自定义Hook（比如useConfirmModal），让使用者通过这个Hook获取打开模态框的方法。
• 使用者只需在组件中调用这个Hook，拿到方法后触发，所有状态更新都在React的组件生命周期内完成。

3. 保持组件的声明式特性 #

模态框的显示/隐藏是由状态驱动的，你只需要在ConfirmDialog中根据Context的isOpen状态决定是否渲染，不需要手动操作DOM或直接修改状态——状态变化后React会自动更新UI。

总结 #

你的核心思路（用Context统一管理模态框状态，让使用者少写样板代码）是对的，但没有遵循React的状态管理和Hook使用规则。要切换到React的思维方式：所有状态变化都要通过组件的状态流转来实现，Hook只能在组件/自定义Hook中使用，Context是传递状态的通道而非状态的管理者。

内容的提问来源于stack exchange，提问作者DomingoSL