反应容器组件动作

Question

I have a Connection component using an external library to get the network status.

import Offline from '../lib/networkStatus';

export class Connection extends React.Component {
  componentDidMount() {
    this.props.onOffline && networkStatus.on('offline', this.props.onOffline);
  }

  render() {
    return this.props.children;
  }

  retry() {
    networkStatus.retry();
  }
}

Connection.propTypes = {
  onOffline: React.PropTypes.func
}

I use it as a container component, to allow children to have access to the onOffline event, to display a "Retry" link:

export class ConnectionRetry extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      offline: false
    }

    this.onOffline = this.onOffline.bind(this);
    this.onRetry= this.onRetry.bind(this);
  }

  onOffline() {
    this.setState({
      offline: true
    });
  }

  onRetry() {
    //TODO..
    // Call ConnectionStatus.retry
  }

  render() {
    return (
      <Connection onOffline={this.onOffline}>
        {!this.state.offline && 
          <a href="#" onClick={this.onRetry}>Retry</a>
        }
      </Connection>
    );
  }
}

I would like to call the Connection.retry method when we click on the Retry link.
How is it possible? I presume the Connection component should be the only one to have access to the third part networkStatus library.

Answer 1

You can use refs , check Doc

Add Refs to Component : ConnectionRetry

render() {
    return (
      <Connection ref={(connection) => { this.connection = connection; }} onOffline={this.onOffline}>
        {!this.state.offline && 
          <a href="#" onClick={this.onRetry}>Retry</a>
        }
      </Connection>
    );
  }

Call method using refs

 onRetry() {
     this.connection.retry()
 }

Full Source code for ConnectionRetry :

export class ConnectionRetry extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      offline: false
    }

    this.onOffline = this.onOffline.bind(this);
    this.onRetry= this.onRetry.bind(this);
  }

  onOffline() {
    this.setState({
      offline: true
    });
  }

  onRetry() {
     this.connection.retry()
  }

  render() {
    return (
      <Connection ref={(connection) => { this.connection = connection; }} onOffline={this.onOffline}>
        {!this.state.offline && 
          <a href="#" onClick={this.onRetry}>Retry</a>
        }
      </Connection>
    );
  }
}

Answer 2

Instead of adding a link inside your connection component what we can do is pass the this.retry as a prop. so we will create a function to extract the logic from the connection component:

export class ConnectionRetry extends React.Component {
  ...

  connectionProps() {
     if (this.state.offline) {

        return { retry: this.onRetry }
     }
  }
}   

render() {
     return (
      <Connection 
       onOffline={this.onOffline} 
       { ...this.connectionProps() } />
     );
}

and then in your ConnectionRetry component:

export class Connection extends React.Component {
 ...

render() {
   return(
     <div><a onlClick={this.props.retry}>retry</a></div>
   );
}