1

Tengo el siguiente problema, necesito llamar una función desde un componente al otro.

Tengo el componente X donde se verifica cuando el usuario hace scroll hasta el final del sitio, cuando esto pasa puedes hacer una acción sea un alert, un setState o lo que sea.

  container.onscroll = function () {
  let height = this.clientHeight;
  let scrollHeight = this.scrollHeight;
  let scrollTop = this.scrollTop;

  if (height + scrollTop === scrollHeight) {
     _this.setState({ display: 'loader'});
      funcionupdate() <--
     setTimeout(function(){  _this.setState({ display: 'hidden'}); }, 2000);
    }
}

Por otro lado el componente Y, en el cual hay una función update().

Como puedo ejecutar la función update() del componente Y desde el componente X?

7
  • No creo que se pueda si no comparten el DOM. Lo que puedes hacer es redireccionar al componente Y, ejecutar su función en el ready u onload y ya que termine redireccionar nuevamente al componente X. Commented el 27 feb. 2017 a las 17:45
  • No me serviria esa opcion, ya que esto se debe hacer sin recargar el sitio en ningun momento Commented el 27 feb. 2017 a las 17:46
  • Qué hace el update() del componente Y? Commented el 27 feb. 2017 a las 17:48
  • Aun no la he creado pero debera actualizar el contenido del componente Commented el 27 feb. 2017 a las 18:14
  • Digamos volver a hacer fetch y mostrar el contenido actualizado Commented el 27 feb. 2017 a las 18:14

1 respuesta 1

5

Puedes hacerlo por Context, para lo cual el contenedor padre debe contener la función a ejecutar cuando el scroll llega hacia abajo. En caso de comunicar componentes que ni siquiera son hermanos, sería muy complejo de este modo. La mejor opción para mantener las cosas simples es implementar en la aplicación el patrón de diseño Observer. De esta manera puedes establecer comunicación entre cualquier grupo de componentes (no solo dos). Puedes usar librerías para esto como Postal.js, PubSub.js, MicroEvent.js o EventEmitter2.

Ejemplo

class Sidebar extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      message: ''
    };
    this.channel = null;
  }
  
  render () {
    return (
      <aside className="sidebar">
        { this.state.message }
      </aside>
    );
  }
  
  componentDidMount () {
    this.channel = postal.channel();
    this.channel.subscribe('scroll.end', (data) => {
      console.info('Received data:', data);
      this.onScrollContentEnd();
    });
  }
  
  onScrollContentEnd () {
    // hacer algo
    this.setState({
      message: 'Scroll End'
    });
  }
}

class Content extends React.Component {
  constructor (props) {
    super(props);
    this.channel = null;
  }
  
  render () {
    return (
      <article className="content" onScroll={this.onscroll.bind(this)}>
        <div id="big"></div>
      </article>
    );
  }
  
  componentDidMount () {
    this.channel = postal.channel();
  }
  
  onscroll (e) {
    let el = e.target;
    let height = el.clientHeight;
    let scrollHeight = el.scrollHeight;
    let scrollTop = el.scrollTop;

    if (height + scrollTop === scrollHeight) {
      // puedes enviar datos opcionales ;)
      this.channel.publish('scroll.end', {
        someData: 'xyz123'
      });
    }
  }
}

class Container extends React.Component {
  render () {
    return (
      <section ref="el" className="container">
        <Sidebar/>
        <Content/>
      </section>
    )
  }
}

ReactDOM.render(<Container/>, document.getElementById('app'));
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

.sidebar {
  background-color: #f39c12;
  color: #fff;
  flex: 0 0 240px;
  font-family: 'Segoe UI', 'Ubuntu';
  line-height: 100vh;
  text-align: center;
}

.content {
  background-color: #2980b9;
  flex: 1;
  overflow: auto;
}

#big {
  height: 1200px;
  margin: 40px auto;
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/postal.js/2.0.5/postal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>


Nota: el ejemplo usa la librería Postal.js que a su vez depende de lodash.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.