如何在React中实现全局Alert？Ref报错及无Prop Drilling方案问询

我来帮你搞定这个全局Alert的问题～你遇到的Ref方案报错和Prop Drilling问题，其实用React Context API就能完美解决，而且步骤很清晰，另外结合你已经在用的Apollo Client，也有对应的方案，我给你详细说下：

方案一：React Context API（最直接简便） #

这个方案能彻底避免Prop Drilling，而且所有组件都能轻松调用setAlert函数，完全符合你的需求：

1. 创建Alert上下文 #

先新建一个AlertContext.js文件，把Alert的状态和操作函数封装在上下文里：

import { createContext, useContext, useState } from 'react';

// 创建上下文
const AlertContext = createContext();

// 上下文提供者组件
export const AlertProvider = ({ children }) => {
  // 存储Alert的状态（类型和消息）
  const [alertState, setAlertState] = useState({ variant: null, message: null });

  // 定义全局调用的setAlert函数
  const setAlert = (variant, message) => {
    setAlertState({ variant, message });
    // 5秒后自动关闭Alert
    setTimeout(() => {
      setAlertState({ variant: null, message: null });
    }, 5000);
  };

  return (
    <AlertContext.Provider value={{ alertState, setAlert }}>
      {children}
    </AlertContext.Provider>
  );
};

// 自定义hooks，简化上下文调用
export const useAlert = () => useContext(AlertContext);

2. 修改GlobalAlert组件 #

让GlobalAlert从上下文里获取状态，不用再通过Ref传递函数：

import { useAlert } from './AlertContext';

const GlobalAlert = () => {
  const { alertState } = useAlert();
  const { variant, message } = alertState;

  if (!message) {
    return <div><br /><br /><br /></div>;
  }

  return (
    <div>
      <Alert variant={variant}>{message}</Alert>
    </div>
  );
};

3. 在App中包裹提供者 #

把整个应用用AlertProvider包裹，这样所有子组件都能访问上下文：

import { AlertProvider } from './AlertContext';

const App = () => {
  return (
    <AlertProvider>
      <div className="container">
        <Router>
          <Menu />
          <GlobalAlert />
          <Routes /> {/* 再也不用传setAlert prop了！ */}
        </Router>
      </div>
    </AlertProvider>
  );
};

4. 在任意组件（比如NewIngredient）中调用 #

直接用自定义hooks获取setAlert，在submit函数里调用即可：

import { useAlert } from './AlertContext';

const NewIngredient = () => {
  const { setAlert } = useAlert();

  const handleSubmit = async () => {
    try {
      // 执行你的后端操作
      await yourBackendOperation();
      // 显示成功Alert
      setAlert('success', '食材添加成功！');
    } catch (error) {
      // 显示错误Alert
      setAlert('danger', '添加失败，请重试');
    }
  };

  return (
    // 你的组件内容
    <button onClick={handleSubmit}>提交食材</button>
  );
};

方案二：利用Apollo Client管理局部状态（适合统一状态管理） #

既然你已经在用Apollo Client，也可以用它来管理Alert的状态，不用额外引入Context：

1. 配置Apollo Client的局部状态 #

在Apollo Client的初始化代码里，添加Alert的类型策略：

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          alert: {
            // 默认返回空状态
            read() {
              return { variant: null, message: null };
            },
          },
        },
      },
    },
  }),
});

2. 创建更新Alert的Mutation和查询Query #

import { gql } from '@apollo/client';

// 设置Alert的Mutation
export const SET_ALERT = gql`
  mutation SetAlert($variant: String, $message: String) {
    setAlert(variant: $variant, message: $message) @client
  }
`;

// 获取Alert状态的Query
export const GET_ALERT = gql`
  query GetAlert {
    alert {
      variant
      message
    }
  }
`;

3. 修改GlobalAlert组件 #

用Apollo的useQuery获取Alert状态：

import { useQuery } from '@apollo/client';
import { GET_ALERT } from './alertQueries';

const GlobalAlert = () => {
  const { data } = useQuery(GET_ALERT);
  const { variant, message } = data.alert;

  if (!message) {
    return <div><br /><br /><br /></div>;
  }

  return (
    <div>
      <Alert variant={variant}>{message}</Alert>
    </div>
  );
};

4. 在NewIngredient中调用Mutation #

import { useMutation } from '@apollo/client';
import { SET_ALERT } from './alertQueries';

const NewIngredient = () => {
  const [setAlert] = useMutation(SET_ALERT);

  const handleSubmit = async () => {
    try {
      await yourBackendOperation();
      setAlert({ variables: { variant: 'success', message: '食材添加成功！' } });
      // 5秒后关闭Alert
      setTimeout(() => {
        setAlert({ variables: { variant: null, message: null } });
      }, 5000);
    } catch (error) {
      setAlert({ variables: { variant: 'danger', message: '添加失败，请重试' } });
    }
  };

  return (
    <button onClick={handleSubmit}>提交食材</button>
  );
};

关于你之前Ref方案的报错原因 #

你遇到的Cannot read property 'setAlert' of null错误，通常是因为：

• 组件还没完成挂载，就调用了alertRef.current.setAlert（比如submit函数在组件渲染初期就执行了）
• Ref没有正确绑定到GlobalAlert组件（不过你用了forwardRef，这个概率低）

但不管怎样，Ref方案确实容易出现这类生命周期相关的问题，而且会导致Prop Drilling，不如Context或Apollo方案可靠。

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