reactjs - 如何将 isConnect 状态传递给其他类

Question

现在我有App.js我的初始页面。
我想从net_provide.js.
如果isConnected为真，则APP.js显示renderLoadingView() 如果不是，则APP.js显示renderDisconnectView()如下代码但我不知道如何将 isConnected 从传递net_provide.js到APP.js
任何人都可以帮助我吗？谢谢！

应用程序.js

renderLoadingView() {
    _aesDecryptWithMode(_aesEncryptWithMode('test'))
    getFcmToken()
    return (
      <View style={ styles.container }>
        <NetworkNotifier
          offlineText="無網路連線"
          onlineText="網路已連線"
          position="top" />
        <Network_provider/>
        <Text>
          Loading Events....
          { '\n' }
        </Text>
      </View>
    )
  }

  renderDisconnectView() {
    return (
      <View style={ styles.container }>
        <Network_provider/>
        <Text>
          diss
          { '\n' }
        </Text>
      </View>
    )

  }

问题在这里 this.props.Connected

  render() {
    return (
   if (this.props.isConnected) {
     return this.renderLoadingView();
   }
   if (!this.props.isConnected) {
     return this.renderDisconnectView();
   }

  }

下面是network_provider.js

export class Network_provider extends React.PureComponent {
  state = {
    isConnected: true
  };

  componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
  }

  handleConnectivityChange = isConnected => {
    if (isConnected) {
      this.setState({
        isConnected
      });
    } else {
      this.setState({
        isConnected
      });
    }
  };

  render() {
    return <App Connected={ this.state.isConnected } />;
  }
}

标签： reactjsreact-native

Answer 1

您可以为此使用Function as Children模式。

network_provider.js

render() {
  const { children } = this.props;
  const { isConnected } = this.state;

  return children && children({isConnected});
}

应用程序.js

<Network_provider>
  {({isConnected}) => {
    if(isConnected) return this.renderDisconnectView();
    return this.renderLoadingView();
    }
  }
</Network_provider>