如何使用React有条件地实现整页只读/可编辑模式切换

强烈不推荐开发两套独立页面。双页实现会带来双倍的维护成本：后续迭代任何公共业务逻辑、调整UI样式、修复bug都需要同步修改两份代码，极容易出现两端逻辑不一致的线上问题。基于单React应用动态切换整页模式是更合理的方案，完全可以满足根据用户ID、权限规则匹配对应页面版本的需求。

核心思路是全局统一判定、分层切换形态，不要零散在单个组件里加判断逻辑：

• 全局状态统一注入
  在应用根组件/路由守卫的初始化逻辑里，统一拉取当前用户ID、角色、权限规则等判定条件，一次性计算出当前页面的模式标记isReadOnly，通过React Context或者你在用的全局状态管理工具（Zustand/Redux等）将这个标记注入整个应用，避免在各个子组件里重复做权限判断。
  最简实现参考：

  import { createContext, useContext, useEffect, useState } from 'react';
  // 全局页面模式上下文
  const PageModeContext = createContext({ isReadOnly: false });
  // 全局调用hook
  export const usePageMode = () => useContext(PageModeContext);
  
  function RootApp() {
    const [isReadOnly, setIsReadOnly] = useState(false);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      // 初始化时统一执行权限判定
      const initPageMode = async () => {
        const currentUser = await fetchCurrentUserInfo(); // 获取用户ID、角色等信息
        const readOnlyStatus = await checkPageEditPermission(currentUser); // 走统一判定规则
        setIsReadOnly(readOnlyStatus);
        setLoading(false);
      };
      initPageMode();
    }, []);
  
    if (loading) return <PageLoading />;
    return (
      <PageModeContext.Provider value={{ isReadOnly }}>
        <AppRouter />
      </PageModeContext.Provider>
    )
  }
  

• 分层实现整页模式切换
  不要给每个输入框单独加disabled属性，按层级做整体切换，保证整页状态统一：
  1. 布局入口层：只读模式下直接隐藏全局编辑工具栏、保存/提交按钮、拖拽调整手柄、编辑入口菜单这类全局操作项，不需要在每个按钮组件上单独加判断
  2. 内容区块层：封装通用的可编辑区块组件，组件内部自动读取全局模式标记：可编辑态渲染表单、输入控件、拖拽排序等编辑类组件；只读态直接渲染纯文本、静态预览内容，编辑相关的DOM节点直接不挂载，而不是简单加禁用属性
  3. 交互逻辑层：全局拦截编辑类操作，比如只读模式下直接阻断内容拖拽、快捷键修改、右键编辑等交互，可统一加弱提示，不需要在每个交互事件里重复写判断逻辑
• 路由层适配（可选）
  如果需要给两种模式配置独立访问路径（比如只读页路径为/document/share/:id，编辑页路径为/document/edit/:id），也不需要做两套页面，只需给同一个页面组件传入不同的模式参数即可。路由守卫统一做权限校验，用户无编辑权限时手动输入编辑页地址直接重定向到只读页即可，不需要维护两套路由配置。

不要图省事给整个页面容器加pointer-events: none实现只读，这种方式会把内容复制、链接跳转这类只读态下本该保留的正常交互全部禁掉，同时页面内依然挂载了所有编辑类控件，不仅性能差，还存在被前端绕过限制的安全风险。

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