React Native中如何将组件A的网络连接状态传递给组件B

嘿，这个需求很常见，我来给你一步步拆解实现方案～

下面以React框架为例（毕竟组件状态传递是React的核心场景之一），分两步实现你的需求：

1. 组件A：传递connection状态给组件B #

组件A负责监听网络状态并维护connection状态，只需要把这个状态作为props传递给组件B即可。这里给你写一个完整的函数组件示例：

import { useState, useEffect } from 'react';
import ComponentB from './ComponentB';

function ComponentA() {
  // 初始化状态为当前网络状态
  const [connection, setConnection] = useState(navigator.onLine);

  useEffect(() => {
    // 监听网络连接变化事件
    const handleOnline = () => setConnection(true);
    const handleOffline = () => setConnection(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  // 将connection状态通过props传递给ComponentB
  return <ComponentB connectionStatus={connection} />;
}

export default ComponentA;

2. 组件B：接收props并设置本地状态 #

组件B接收到来自A的connectionStatus后，如果你需要基于这个状态创建自己的本地状态（而不是直接使用props），可以用useEffect来监听props变化，同步更新本地状态：

import { useState, useEffect } from 'react';

function ComponentB({ connectionStatus }) {
  // 初始化本地状态为传入的网络状态
  const [localConnectionState, setLocalConnectionState] = useState(connectionStatus);

  // 当传入的connectionStatus变化时，同步更新本地状态
  useEffect(() => {
    setLocalConnectionState(connectionStatus);
    
    // 这里可以添加状态变化后的自定义逻辑
    if (connectionStatus) {
      console.log('网络已恢复，触发在线业务逻辑');
    } else {
      console.log('网络断开，执行离线降级处理');
    }
  }, [connectionStatus]); // 依赖项设置为connectionStatus，确保props变化时触发

  return (
    <div className="connection-indicator">
      <p>当前网络状态：{localConnectionState ? '✅ 在线' : '❌ 离线'}</p>
    </div>
  );
}

export default ComponentB;

额外小贴士 #

• 如果组件B不需要独立的本地状态，完全可以直接使用传入的connectionStatus props，不用额外定义localConnectionState，这样代码更简洁高效。
• 如果你用的是类组件，逻辑类似：组件A通过this.props传递状态，组件B在componentDidUpdate生命周期方法中监听props变化，调用this.setState更新本地状态。

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