React Native：跨组件调用函数修改另一组件useState状态的实现方法

核心思路 #

通过useContext封装通知状态的管理逻辑，让A组件（或外部独立函数）能获取到B组件中useState的更新方法，从而触发状态变更。分两种场景实现：

场景1：仅在A组件内触发通知 #

这种场景不需要外部独立函数，直接在A组件中通过Context获取状态更新方法即可。

步骤1：创建通知Context #

新建NotificationContext.tsx：

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

// 定义Context类型
type NotificationContextType = {
  newNotification: boolean;
  setNewNotification: React.Dispatch<React.SetStateAction<boolean>>;
};

// 创建Context，初始值为null（后续由Provider提供实际值）
const NotificationContext = createContext<NotificationContextType | null>(null);

// 自定义Hook，简化Context获取
export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error('useNotification必须在NotificationProvider内部使用');
  }
  return context;
};

// Provider组件，包裹需要访问通知状态的组件树
export const NotificationProvider = ({ children }: { children: ReactNode }) => {
  const [newNotification, setNewNotification] = useState(false);

  return (
    <NotificationContext.Provider value={{ newNotification, setNewNotification }}>
      {children}
    </NotificationContext.Provider>
  );
};

步骤2：B组件使用通知状态 #

B.tsx：

import { useNotification } from './NotificationContext';

export const B = () => {
  const { newNotification } = useNotification();

  return (
    <div className="notification">
      {newNotification ? '🔔 有新通知！' : '暂无通知'}
    </div>
  );
};

步骤3：A组件触发状态更新 #

A.tsx：

import { useNotification } from './NotificationContext';

export const A = () => {
  const { setNewNotification } = useNotification();

  const triggerNotification = () => {
    // 触发新通知
    setNewNotification(true);
    // 3秒后自动重置状态
    setTimeout(() => setNewNotification(false), 3000);
  };

  return (
    <button onClick={triggerNotification} style={{ padding: '8px 16px' }}>
      触发通知
    </button>
  );
};

步骤4：根组件挂载Provider #

App.tsx：

import { NotificationProvider } from './NotificationContext';
import { A } from './A';
import { B } from './B';

function App() {
  return (
    <NotificationProvider>
      <div style={{ padding: '20px' }}>
        <A />
        <B />
      </div>
    </NotificationProvider>
  );
}

export default App;

场景2：外部独立函数触发通知（如API回调、WebSocket事件） #

如果incomingNotification需要在非组件环境调用，需要用全局Ref存储状态更新方法，桥接外部函数和React状态。

修改NotificationContext.tsx #

添加全局Ref存储setNewNotification，并导出外部可调用的函数：

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

type NotificationContextType = {
  newNotification: boolean;
  setNewNotification: React.Dispatch<React.SetStateAction<boolean>>;
};

const NotificationContext = createContext<NotificationContextType | null>(null);

// 全局Ref，存储状态更新方法
let notificationSetter: React.Dispatch<React.SetStateAction<boolean>> | null = null;

export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error('useNotification必须在NotificationProvider内部使用');
  }

  // 同步最新的setter到全局Ref
  useEffect(() => {
    notificationSetter = context.setNewNotification;
    return () => {
      notificationSetter = null;
    };
  }, [context.setNewNotification]);

  return context;
};

export const NotificationProvider = ({ children }: { children: ReactNode }) => {
  const [newNotification, setNewNotification] = useState(false);

  return (
    <NotificationContext.Provider value={{ newNotification, setNewNotification }}>
      {children}
    </NotificationContext.Provider>
  );
};

// 导出外部可调用的通知触发函数
export const incomingNotification = () => {
  if (notificationSetter) {
    notificationSetter(true);
    // 可选：自动重置通知状态
    setTimeout(() => notificationSetter?.(false), 3000);
  }
};

A组件调用外部函数 #

A.tsx：

import { incomingNotification } from './NotificationContext';

export const A = () => {
  return (
    <button onClick={incomingNotification} style={{ padding: '8px 16px' }}>
      触发外部通知函数
    </button>
  );
};

关键注意事项 #

• 所有使用useNotification的组件必须包裹在NotificationProvider内部，否则会抛出错误。
• 全局Ref方案中，要确保在组件卸载时清空Ref，避免内存泄漏。
• 如果不需要外部独立函数，优先使用场景1的实现方式，代码更简洁且符合React Hooks规范。

内容的提问来源于stack exchange，提问作者Hasan Zakaria Alhajhamad